Try to transform object (type casting) using map operator in angular

Question

Api response (json) -

{
    "count": 1050,
    "next": "....",
    "previous": null,
    "results": [
        {
            "name": "Test1",
            "url": "https://test/1/"
        },
        {
            "name": "Test2",
            "url": "https://test/2/"
        }
     ]
}

Interface:

export interface ITestModel{
  name: string;
  url: string;
}

Service:

getData(): Observable<ITestModel[]> {
    return this.http.get<ITestModel[]>(this.apiUrl).pipe(
      map((res) =>
        res.map((data) => ({
          name: data.name,
          url: data.url
        }))
      )
    );
  }

Error: (When I subscribe the above function in controller)

core.js:4352 ERROR TypeError: res.map is not a function at MapSubscriber.project (test.service.ts:19)

Expectation:

In getData() function, I would like to transform observable as ITestModel[]
Expected output while subscribe (Json)

[ { "name": "Test1", "url": "https://test/1/" }, { "name": "Test2", "url": "https://test/2/" } ]

Thank you !

RonCG · Accepted Answer · 2020-10-11 14:53:22Z

1

Try this:

getData(): Observable<ITestModel[]> {
    return this.http.get<any>(this.apiUrl).pipe(
      map((res) =>
        res.results.map((data) => {
          return { 
             name: data.name,
             url: data.url
           };
        });
      )
    );
  }

edited Oct 11, 2020 at 14:53

answered Oct 11, 2020 at 13:44

RonCG

3691 silver badge7 bronze badges

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

2 Comments

Mohammed Rusho Over a year ago

Does not working. Property 'results' does not exist on type 'ITestModel[]' There are only 2 properties id and url.

RonCG Over a year ago

Ok, I updated the answer. Probably not the best solution, but hopefully it works.

Collectives™ on Stack Overflow

Try to transform object (type casting) using map operator in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related