如何以角度解开 Json 数据？

Posted 2023-03-13

【中文标题】如何以角度解开 Json 数据？

【英文标题】：How to Unwrap Json data in angular?

【发布时间】：2020-08-05 04:13:56

【问题描述】：

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

当我调用其余 API 时，我想用 angular typescript 解析这些数据。怎么做。

这部分是我想要转换为模型类数组的 java 类对象。

"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

我的模型课

并且这些信息用于跟踪分页。

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

【问题讨论】：

你能把你的可观察属性Fifa[]改成GetResponse

【参考方案1】：

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

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

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

编辑

您已声明要从响应中返回所有信息。在这种情况下，您应该从服务函数返回一个实现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的对象。

【讨论】：

它成功了，我将如何访问分页记录

你想让它去哪里？ Fifa[] 数据类型上没有分页

无论你在哪里访问它，你都会通过response[1]得到它

fetchAllGamesRecordPaginate(pageNumber: number, pageSize: number): Observable const fifaUrl = $this.baseUrl/demo/pageNumber/$pageNumber/pageSize/$pageSize; // 返回 this.httpClient.get(fifaUrl); return this.httpClient.get(fifaUrl).pipe(map((response: any[]) => response[0]));

那么，请您 :) 编辑您的答案以显示我如何同时获得响应 [0] 和响应 [1]，我是打字稿的新手并且遇到语法问题：)。

【参考方案2】：

如果您希望该方法仅返回 Observable<Fifa[]>，您应该在您的 Observable 上使用 map 运算符：

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

【参考方案3】：

将返回类型更新为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
       
     )
    ); 

api 返回一个包含两项的数组，第一项是 fifa[] 和 第二个是带有分页信息的对象

【讨论】：

GetResponse 中会有什么

不，我想要 GetResponse 接口中的代码

该api返回一个包含两项的数组，因此您需要将该数组映射到GetResponse

更新后的答案会给你一个回复，structuer 为GetResponse

但是您还没有定义要返回的 GetResponse 接口