Parsing API Response in Angular - node.js

Question

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?

Answer 1

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

Answer 2

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);
}