all - hoping you can help me learn how to parse a JSON response.

I have a service that makes an API call like this:

  private REST_API_SERVER = 'myapicall.com'

  constructor(private httpClient: HttpClient) { }

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

The above is returned to a component:

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

}

I can output the response in my component HTML like this:

{{data | json}}

At which point a response with a structure like this is written to the screen:

 {
  "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"
      ]
    }
  ]
}

In my component HTML, how would I write this item's title to the screen?

CodePudding user response：

Assuming that

const data={complete_json_you_have_provided}

//then

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

prints required title array [Apple iPhone 12 mini (5G) Factory Unlocked GSM CDMA 256GB | 128GB | 64GB]

check here TS PLAYGROUND

CodePudding user response：

I don't understand why (please help educate me if you know), but I got it working by changing the sendGetRequest() function to:

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

Rather than:

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