如何解包 angular 中的 Json 数据？

Question

我有一个 Json 这种格式的数据

我想在调用其余 API 时在 angular 打字稿中解析此数据。怎么做。

这部分是我的 java class 对象，我想将其转换为我的模型 class 数组。

"gameId": 66,
"kashScore": 0,
"samScore": 1,
"wonBy": "Sam",
"createUserId": 0,
"lastModifiedUserId": 0,
"creationDate": "2020-04-20T14:05:44.263+0000",
"lastModifiedDateTime": "2020-04-20T14:05:44.264+0000",
"sessionId": 1000,
"count": null

我的模型class

此信息用于跟踪分页。

我试过这样的东西，但它给出了错误：-

Answer 1

您的回复只是一个数组。表示 Fifa[] 的数据是响应数组中的第一项。

HttpClient 不会神奇地为您转换它。如果您想 return Fifa[] 来自您的服务，那么您需要将您的响应映射到该类型。

return this.http.get<any[]>(fifaUrl).pipe(
  map((response: any[]) => response[0])
);

编辑

您已声明要return 回复中的所有信息。在那种情况下，您应该 return 一个从服务函数实现 GetResponse 的对象（并且可能考虑一个更合适的名称）。

fetchAllGamesRecordPaginate(
  pageNumber: number, pageSize: number
): Observable<GetResponse> { 
  const fifaUrl = ${this.baseUrl}/demo/pageNumber/${pageNumber}/pageSize/${pageSize}; 
  return this.httpClient.get(fifaUrl).pipe( 
    map((response: any[]) => {
      const pagination = response[1];
      return {
        fifa: response[0],
        totalRecord: pagination.totalRecord,
        pageSize: pagination.pageSize,
        pageNumber: pagination.pageNumber,
        totalPages: pagination.totalPages
      };
    })
  ); 
}

这里我将响应数组映射到一个实现了 GetResponse.

的对象

Answer 2

如果您希望该方法只是 return 一个 Observable<Fifa[]>，您应该在 Observable:

上使用地图运算符

return this.httpClient.get<GetResponse>(fifaUrl).pipe(
  map((response) => response.fifa)
);

Answer 3

将 return 类型更新为 Observable<GetResponse> 然后您需要将响应映射到 GetResponse 结构

fetchAllGamesRecordPaginate(pageNumber:number,pageSize: number):Observable<GetResponse>{ 
  const fifaUrl = ${this.baseUrl}/demo/pageNumber/${pageNumber}/pageSize/${pageSize}; 
  return this.httpClient.get(fifaUrl)
    .pipe(([fifa,paginationInfo]) => (
      {
       fifa ,
       ...paginationInfo
       }
     )
    ); 
}

the api return an array with two items the first is the fifa[] and the second is an object with pagination information

如何解包 angular 中的 Json 数据？

How to Unwrap Json data in angular?

json

httpclient

observable

typescript

angular