In Angular, how to parse and extract HTTP response that has Complex structure (JSON)?

Viewed 203

I am new to Angular and need your help here. I have an Angular service that has the API calling function as shown below.


    searcheBay() {
        console.log("calling ebay service");
        return this.httpClient.get (this.ebayURL);
      }

and I am calling this function from the component as shown below.


    this.searchService.searcheBay().subscribe((data) => {
          this.svcdata  =  data

      });

The data variable has complex JSON structure (see the image below).

JSON structure

The data I am looking to read is held by "searchResult" element. Could you suggest how to parse and extract the "searchResult" element? Thanks in advance.

I debugged in the Safari DEV console and see the element accessibility as shown below. DEV console debug

When I updated the same code in my component, I encounter compile: ERROR in src/app/search/search.component.ts(20,29): error TS2339: Property 'findItemsByKeywordsResponse' does not exist on type 'Object'. Please suggest your thoughts.

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

  });
2 Answers

@javapedia.net try this, if you response data Object is same as you shown in the image,

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

Edit

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

I ended up using the map projection as shown below. Hope this helps.

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

  }
Related