Angular : HttpClient Service and Observable custom type

Question

My getHeroes function is supposed to return Hero[] Objects, but I cannot access its methods. Am I doing something wrong ?

hero.ts

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

  getName(): string {
    return this.name;
  }
}

heroes.service.ts

getHeroes (): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        catchError(this.handleError('getHeroes', []))
      );
  }

heroes.component.ts

getHeroes(): void {
  this.heroesService.getHeroes()
    .subscribe(heroes => {
      this.heroes = heroes;
      this.heroes.forEach((hero) => console.log(hero));
      this.heroes.forEach((hero) => console.log(hero.getName())); //ERROR here
    });
}

I'm getting a ERROR TypeError: hero.getName is not a function on the last line.

Here is a live version Live link

Check the following link. stackoverflow.com/questions/47748170/… — Jeeva J
– Jeeva J, Commented Oct 29, 2018 at 9:12
@JeevaJsb why ? I still have an error event when hero is an interface. — Hssen
– Hssen, Commented Oct 29, 2018 at 9:14
Interface cannot be instantiate. For good practice use interface instead of class. For instantiate, please refer @ritaj's answer — Jeeva J
– Jeeva J, Commented Oct 29, 2018 at 9:24

Roberto Zvjerković · Accepted Answer · 2018-10-29 09:17:16Z

7

Http call returns an object (actually just a JSON string which will later by parsed by HttpClient) with id and name and no function. You can check that in your network tab.

What you could do is just use a contructor:

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

  getName(): string {
    return this.name;
  }

  contructor(id, name) {
    this.id = id;
    this.name = name;
   }
}

And later map the response from http call to the object you need:

getHeroes (): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        map(hero => new Hero(hero.id, hero.name),
        catchError(this.handleError('getHeroes', []))
      );
  }

edited Oct 29, 2018 at 9:17

answered Oct 29, 2018 at 9:11

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

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

1 Comment

Jeeva J Over a year ago

This would be the answer. Since we need to instantiate the class if the properties should be accessible.

Collectives™ on Stack Overflow

Angular : HttpClient Service and Observable custom type

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related