在 Angular 中解析 A​​PI 响应

Question

所有 - 希望你能帮助我学习如何解析 JSON 响应。

我有一个进行如下 API 调用的服务：

  private REST_API_SERVER = 'myapicall.com'

  constructor(private httpClient: HttpClient) { }

  public sendGetRequest(): Observable<any> {
   return this.httpClient.get(this.REST_API_SERVER);
  }

上面的内容返回到组件：

 sendGetRequest(): void {
     this.dataService.sendGetRequest()
       .subscribe(data => this.data = data);

}

我可以在我的组件 HTML 中输出响应，如下所示：

{{data | json}}

此时，具有如下结构的响应将写入屏幕：

 {
  "findItemsByKeywordsResponse": [
    {
      "ack": [
        "Success"
      ],
      "version": [
        "1.13.0"
      ],
      "timestamp": [
        "2022-03-03T16:12:06.220Z"
      ],
      "searchResult": [
        {
          "@count": "1",
          "item": [
            {
              "itemId": [
                "294786675398"
              ],
              "title": [
                "Apple iPhone 12 mini (5G) Factory Unlocked GSM+CDMA 256GB | 128GB | 64GB"
              ],
              "globalId": [
                "EBAY-US"
              ],
              "subtitle": [
                "✤Cheapest Online ✤FREE SHIPPING ✤FREE RETURN ✤US SELLER"
              ],
              "primaryCategory": [
                {
                  "categoryId": [
                    "9355"
                  ],
                  "categoryName": [
                    "Cell Phones & Smartphones"
                  ]
                }
              ],
              "galleryURL": [
                "https://i.ebayimg.com/thumbs/images/g/hBYAAOSw~qhgy8mG/s-l140.jpg"
              ],
              "viewItemURL": [
                "https://www.ebay.com/itm/Apple-iPhone-12-mini-5G-Factory-Unlocked-GSM-CDMA-256GB-128GB-64GB-/294786675398?var=593157879172"
              ],
              "autoPay": [
                "true"
              ],
              "postalCode": [
                "112**"
              ],
              "location": [
                "Brooklyn,NY,USA"
              ],
              "country": [
                "US"
              ],
              "shippingInfo": [
                {
                  "shippingServiceCost": [
                    {
                      "@currencyId": "USD",
                      "__value__": "0.0"
                    }
                  ],
                  "shippingType": [
                    "Free"
                  ],
                  "shipToLocations": [
                    "Worldwide"
                  ],
                  "expeditedShipping": [
                    "true"
                  ],
                  "oneDayShippingAvailable": [
                    "true"
                  ],
                  "handlingTime": [
                    "1"
                  ]
                }
              ],
              "sellingStatus": [
                {
                  "currentPrice": [
                    {
                      "@currencyId": "USD",
                      "__value__": "439.88"
                    }
                  ],
                  "convertedCurrentPrice": [
                    {
                      "@currencyId": "USD",
                      "__value__": "439.88"
                    }
                  ],
                  "sellingState": [
                    "Active"
                  ],
                  "timeLeft": [
                    "P28DT9H52M53S"
                  ]
                }
              ],
              "listingInfo": [
                {
                  "bestOfferEnabled": [
                    "false"
                  ],
                  "buyItNowAvailable": [
                    "false"
                  ],
                  "startTime": [
                    "2022-02-01T02:05:58.000Z"
                  ],
                  "endTime": [
                    "2022-04-01T02:04:59.000Z"
                  ],
                  "listingType": [
                    "FixedPrice"
                  ],
                  "gift": [
                    "false"
                  ],
                  "watchCount": [
                    "26"
                  ]
                }
              ],
              "returnsAccepted": [
                "true"
              ],
              "condition": [
                {
                  "conditionId": [
                    "1500"
                  ],
                  "conditionDisplayName": [
                    "Open box"
                  ]
                }
              ],
              "isMultiVariationListing": [
                "true"
              ],
              "topRatedListing": [
                "true"
              ]
            }
          ]
        }
      ],
      "paginationOutput": [
        {
          "pageNumber": [
            "1"
          ],
          "entriesPerPage": [
            "1"
          ],
          "totalPages": [
            "12825623"
          ],
          "totalEntries": [
            "12825623"
          ]
        }
      ],
      "itemSearchURL": [
        "https://www.ebay.com/sch/i.html?_nkw=iPhone&_ddo=1&_ipg=1&_pgn=1"
      ]
    }
  ]
}

在我的组件中组件 HTML，我如何将该项目的标题写入屏幕？

Answer 1

假设

const data={complete_json_you_have_provided}

//then

console.log(data.findItemsByKeywordsResponse[0].searchResult[0].item[0].title);

打印所需的标题数组[Apple iPhone 12 mini (5G) Factory Unlocked GSM+CDMA 256GB | 128GB | 64GB]

在此查看 TS 游乐场

Answer 2

我不明白为什么（如果你知道，请帮助教育我），但我通过将 sendGetRequest() 函数更改为：

  public sendGetRequest(): Observable<any> {
    return this.http.get(this.REST_API_SERVER);
  }

而不是：

 public sendGetRequest(): Observable<any> {
   return this.httpClient.get(this.REST_API_SERVER);
  }