在 Angular 中，如何解析和提取具有复杂结构 (JSON) 的 HTTP 响应？答案

【问题标题】：In Angular, how to parse and extract HTTP response that has Complex structure (JSON)?在 Angular 中，如何解析和提取具有复杂结构 (JSON) 的 HTTP 响应？
【发布时间】：2019-06-04 21:25:43
【问题描述】：

我是 Angular 新手，在这里需要您的帮助。我有一个 Angular 服务，它具有如下所示的 API 调用功能。

搜索易趣（）{ console.log("调用 ebay 服务"); 返回 this.httpClient.get(this.ebayURL); }

我正在从组件中调用这个函数，如下所示。

this.searchService.searcheBay().subscribe((数据) => { this.svcdata = 数据 });

数据变量具有复杂的 JSON 结构（见下图）。

我要读取的数据由“searchResult”元素保存。您能否建议如何解析和提取“searchResult”元素？提前致谢。

我在 Safari DEV 控制台中进行了调试，并看到了如下所示的元素可访问性。

当我更新组件中的相同代码时，我遇到编译：错误在 src/app/search/search.component.ts(20,29): 错误 TS2339: 属性 'findItemsByKeywordsResponse' 不存在输入“对象”。请提出你的想法。

 serviceOnButtonClick(){
 this.searchService.searcheBay().subscribe((data) => {
      this.svcdata  =  data.findItemsByKeywordsResponse[0].searchResult

  });

【问题讨论】：

this.svcdata[0].searchResult?

标签： node.js angular typescript

【解决方案1】：

@javapedia.net 试试这个，如果你回复data 对象和你在图片中显示的一样，

this.searchService.searcheBay().subscribe((data) => {
    this.svcdata  =  data.findItemsByKeywordsResponse[0].searchResult;
    console.log(this.svcdata);
});

编辑

this.searchService.searcheBay().subscribe((data: any) => {
        this.svcdata  =  data.findItemsByKeywordsResponse[0].searchResult;
        console.log(this.svcdata);
    });

【讨论】：

感谢您的建议。我试过了，但是得到了“未定义”的错误。
我尝试了同样的方法并在 src/app/search/search.component.ts(20,29) 中收到此错误错误：错误 TS2339：“对象”类型上不存在属性“findItemsByKeywordsResponse” .我更新了同样的问题。

【解决方案2】：

我最终使用了如下所示的地图投影。希望这可以帮助。

  serviceOnButtonClick(){
 this.searchService.searcheBay().pipe(map((data:any) => data.findItemsByKeywordsResponse[0].searchResult)).subscribe((data) => {
      this.svcdata  =  data;
      console.log(this.svcdata);
  });

  }

【讨论】：