How to convert JSON response to array of angular objects within service?

Question

EDIT: no need to answer, the problem was elsewhere. I apologize :(

I need getHeroes() to return an array of 'Hero'. It was working with the tutorial's in-memory data, but fails when I use my django rest API.

hero.ts

export class Hero {
  id: number;
  name: string;
}

hero.service.ts

getHeroes (): Observable<Hero[]> {
      return this.http.get<Hero[]>(this.heroesUrl).pipe(
      map(response => response['heroes']),
      tap(_ => this.log('fetched heroes')),
      catchError(this.handleError<Hero[]>('getHeroes', []))
    );
}

JSON response from API

{
  "heroes": [
    {
      "id": 1,
      "name": "hero1"
    },
    {
      "id": 2,
      "name": "hero2"
    }
  ]
}

Can you clarify what were you expecting and what you actually got? — Shadab Faiz
– Shadab Faiz, Commented May 23, 2019 at 15:42
Yes, it would be good if you could post the output of what you got (if any). As well as making your question more so complete by stating what you were expecting. — Compiler v2
– Compiler v2, Commented May 23, 2019 at 15:59

Compiler v2 · Accepted Answer · 2019-05-23 15:48:13Z

1

You can use within your component subscribe:

import { Hero } from "./heroComponent";

export class SomeComponent implements OnInit {

  heroes: Hero;

  constructor(private serv: YourService) { }

  ngOnInit() {
    this.serv.getHeroes().subscribe(serv => {
        this.heroes = serv
        console.log(this.heroes);
    });
  }

}

Of course, change some stuff to make it fit your code. It should map your JSON to to the Object.

See if any of these help as well:

This might be more to what you are asking: https://nehalist.io/working-with-models-in-angular/

Others

Map Json to object in angular

https://coursetro.com/posts/code/171/Angular-7-Tutorial---Learn-Angular-7-by-Example (scroll down to the HTTP service part of it)

answered May 23, 2019 at 15:48

Compiler v2

3,61513 gold badges36 silver badges61 bronze badges

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

Comments

baumgarb · Accepted Answer · 2019-05-23 16:16:25Z

0

There's two options for this (leaving out error handling for brevity here):

Option 1: Treat the result as an any and cast the heroes property to an Hero[]

getHeroes(): Observable<Hero[]> {
    return this.http.get<any>(this.heroesUrl).pipe(
        map(res => res.heroes as Hero[])
    );
}

Option 2 (preferable): Create a model (e.g. HeroResult) that represents what your server actually returns to have full type safety

export class HeroResult {
    heroes: Hero[];
}

getHeroes(): Observable<Hero[]> {
    return this.http.get<HeroResult>(this.heroesUrl).pipe(
        map(res => res.heroes)
    );
}

answered May 23, 2019 at 16:16

baumgarb

2,2473 gold badges23 silver badges30 bronze badges

Comments

Tuhin · Accepted Answer · 2019-05-23 17:21:22Z

0

I'm sorry. My while I could see the XHR response sent by my django API, there was CORS problem. I did not have to change my code. Just had to allow CORS in django. Sorry to take up your time. Thank you for your suggestions.

answered May 23, 2019 at 17:21

Tuhin

531 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to convert JSON response to array of angular objects within service?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related