Transform response data with RxJS Operators in angular

Question

I have a service response like below.

  "amount": 3330,
  "count": 56,
  "dataObjects": [
    {
      "links": {
        "self": "http://localhost:4200/api/collection/"
      },
      "id": "W391",
      "objectNumber": "IN-W391",
      "title": "Image 23",
      "webImage": {
        "guid": "89de22aa-e19f-4c83-87ff-26dd8f319c05",
        "width": 1200,
        "height": 800,
        "url": "http://localhost:4200/api/collection/7qzT0pbclLB7y3fdS1GxzMnV7m3gD3gWnhlquhFaJSn6gNOvMmTUAX3wVlTzhMXIs8kM9IH8AsjHNVTs8em3XQI6uMY=s0"
      }
    },
    {
      "links": {
        "self": "http://localhost:4200/api/collection/"
      },
      "id": "W391",
      "objectNumber": "IN-W391",
      "title": "Image 23",
      "webImage": {
        "guid": "89de22aa-e19f-4c83-87ff-26dd8f319c05",
        "width": 1200,
        "height": 800,
        "url": "http://localhost:4200/api/collection/7qzT0pbclLB7y3fdS1GxzMnV7m3gD3gWnhlquhFaJSn6gNOvMmTUAX3wVlTzhMXIs8kM9IH8AsjHNVTs8em3XQI6uMY=s0"
      }
    }
  ]
}

All i am trying to do is to retrieve just the dataObjects array so that i can loop through it and bind the url under webImage and display it in the UI. here is what i have tried

Component.ts

ngOnInit() {
this.artistService.GetArtistDetails().pipe(map( response=> response.dataObjects))
    .subscribe((artists: any[])=>{
      console.log(artists);
    });  
  }
}

Service.ts

 public GetArtistDetails(){
    return this.httpClient.get(this.REST_API_SERVER);
  }

Thanks in advance

In your service file, can you cast it directly to a model type? e.g. method GetArtistDetails(): Observable<DataObjects[]> { // then use .pipe(map(result=>result.dataObjects ))} — A2la
– A2la, Commented Jun 5, 2021 at 6:29

Yoni A · Accepted Answer · 2021-06-05 09:01:27Z

1

In addition to what A2Ia said, here is a sample code that works as desired:

stackblitz app: https://stackblitz.com/edit/angular-ivy-1ixvmx?file=src/app/app.component.ts

result: https://angular-ivy-1ixvmx.stackblitz.io

answered Jun 5, 2021 at 9:01

Yoni A

1341 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Transform response data with RxJS Operators in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related