Angular: How to get a array of objects that are nested within the server response?

Question

I would like to get data from the server using the following method:

searchProducts(): Observable<Product[]> {
  return this.http.get<Product[]>('/lerp-product-product');
}

But the data from the server looks like this:

{
    "desc": "",
    "auth": 0,
    "success": 1,
    "messages": [],
    "obj": null,
    "arr": [
        {
            "product_uuid": "6d80eb05-451e-4309-b0cf-070a14a8e22e",
            "product_no": "97508175",
            "product_structure": "list",
            "product_origin": "intern",
            "product_type": "part",
            "product_version_extern": "",
            "product_revision_extern": "",
        }
    ],
    "countProducts": 28
}

The problem is that the data for the observable is in arr. How can you tell Angular.http that the data is in arr and not directly in the root of the JSON response?

.pipe(map(res => res.arr))?

yurzui
– yurzui

2019-08-24 11:27:16 +00:00
Commented Aug 24, 2019 at 11:27 — yurzui
– yurzui, Commented Aug 24, 2019 at 11:27

Christopher Peisert · Accepted Answer · 2019-08-24 11:40:07Z

1

The standard approach is to use the RXJS map operator to transform the Observable HTTP response.

import { map } from 'rxjs/operators';

...

searchProducts(): Observable<Product[]> {
  return this.http.get<Product[]>('/lerp-product-product').pipe(map(
    response => response.arr
  ));
}

answered Aug 24, 2019 at 11:40

Christopher Peisert

24.5k4 gold badges102 silver badges127 bronze badges

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

1 Comment

bitkorn Over a year ago

Great, that's exactly what I needed

Sajeetharan · Accepted Answer · 2019-08-24 11:27:59Z

0

When you are calling the sevice from your component , you could do access the array arr from the response as follows,

this.myService.searchProducts().subscribe(data=> console.log(data.arr));

answered Aug 24, 2019 at 11:27

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

vijai · Accepted Answer · 2019-08-24 12:21:37Z

0

Add this in yourservice.ts

searchProducts(): Observable<Product[]> {
  return this.http.get<Product[]>('/lerp-product-product');
}

Call searchProducts method from yourcomponent.ts

 this.yourservice.searchProducts().subscribe(attr => {
     var auth= attr.auth;
var success = attr.success;
like these you will get all the values..

    });

answered Aug 24, 2019 at 12:21

vijai

12 bronze badges

1 Comment

bitkorn Over a year ago

I already had that idea and it works. But you would have to do that wherever you access the data. @Christopher Peisert Answer I have to do only one place (in the service).

Collectives™ on Stack Overflow

Angular: How to get a array of objects that are nested within the server response?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related