How to map object array to my type array

Question

I have a class:

export class    Stuff {
      id: string;
      namd: string;
    }

With angular < 4.3 I have this call:

getStuff(): Observable<Stuff[]> {
    return this.http.get('api-url-here/stuff')
        .map((data: Response) => {
            return data.json()
                .map((item: any) => {
                    return {
                    id: item.id,
                    name: item.name
                };
        });
    })
}

With angular >= 4.3 I changed it to this:

getStuff(): Observable<Stuff[]> {
    return this.http.get<Stuff[]>('api-url-here/stuff')
        .map((data: any) => {
            return data
                .map((item: any) => {
                    return {
                    id: item.id,
                    name: item.name
                };
        });
    })
}

I am receiving the array of stuff fro my api that looking like that.

[
 {"id":1,"name": "name" }
]

As you can see from the code example above I have to map the data twice to get my type shape (Stuff[]). Is there a better way of doing this with angular 4.3+ ?

how does data from API look and what do you want to have in the end? — Max Koretskyi
– Max Koretskyi, Commented Aug 15, 2017 at 4:52
@Maximus the api data is like [{"id":1,"name": "name" }]. I need to return the thing as I am doing inside getStuff() just wondering is there any better way than just having map()..map() or may be I can have just single map() that I didnt figureout. — Sergino
– Sergino, Commented Aug 15, 2017 at 5:27
so it returns an array of objects, do you need to get only one object? do you use new http client from common package? — Max Koretskyi
– Max Koretskyi, Commented Aug 15, 2017 at 5:30
@Maximus Yes I am using @angular/common/http HttpClient in my second example. I need to get all, so I am mapping over. I did map over twice with @angular/http as I was getting data.json(). Now I do not need that but didn't figure out how to improve my double map() — Sergino
– Sergino, Commented Aug 15, 2017 at 5:35

Nikolay Osaulenko · Accepted Answer · 2017-08-15 06:19:55Z

3

You are using typed response in new HttpClientModule, so in first map your result is already parsed.

getStuff(): Observable<Stuff[]> {
  return this.http.get<Stuff[]>('api-url-here/stuff');
}

Should work. And then

SomeStaffService.getStuff().subscribe(staff => console.log(staff));

Update:

In this case you will be able to handle the errors in two ways. Outside of your service

SomeStaffService.getStuff().subscribe(
  staff => console.log(staff),
  (err: HttpErrorResponse) => {
    if (err.error instanceof Error) {
      console.log("Client-side error occured.");
    } else {
      console.log("Server-side error occured.");
    }
  }
);

Or you can subscribe right in your service and catch the error there. Please refer to documentation

edited Aug 15, 2017 at 6:19

answered Aug 15, 2017 at 5:38

Nikolay Osaulenko

1,4821 gold badge12 silver badges21 bronze badges

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

4 Comments

Sergino Over a year ago

It is working btw, BUT how would you .catch() an error inside getStuff() in that case? as actually I had map().map().catch() just didnt put .catch() in the example.

Sergino Over a year ago

is there any way to have one single map() just for a purpose of having .map().catch() ? I just didnt figure out how to do that. so keep stuck with map().map().catch()

Nikolay Osaulenko Over a year ago

No. Let me explain. You should not use map at all(if you don't want to perform some additional modifications). In previous HttpClient map was using to process the response. In new one, all response processing is going internal so you should not use not map nor catch anymore. Handling typed errors in the subscriber is more clean and unambiguous

Wallace Howery Over a year ago

@NikolayOsaulenko, the http.get<MyType>() using HttpClient helps, but it still returns an [object array] that contains my expected array: [object array] [0...99] [0...9] 0 fName: bob lName: smith. Is there a first() option? The array I want is still nested in an outer array (i.e. [object array]). Thanks!

Collectives™ on Stack Overflow

How to map object array to my type array

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related