angular 4 observable returns [object Object]

Question

I am using Angular 4 as my frontend and Laravel 5.5 as my restful API. the backend seems fine wrt the problem, i can sent curl requests and get back exactly what i expect, a JSON with 2 key-value pairs:

[{"id":1,"name":"Mr. Nice"}]

When i try and do this with angular i get the following:

HERO: [object Object] HERO.ID: HERO.NAME

my service (I included a working get request just for reference):

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

/** ISSUE HERE */
getHero(id: number): Observable<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get<Hero>(url).pipe(
        tap(_ => this.log(`fetched hero id=${id}, ${url}`)),
        catchError(this.handleError<Hero>(`getHero id=${id}`))
    );
}

the component:

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService }  from '../hero.service';
import { Hero } from '../hero';

@Component({
    selector: 'app-hero-detail',
    templateUrl: './hero-detail.component.html',
    styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {

    @Input() hero: Hero;

    constructor(
        private route: ActivatedRoute,
        private heroService: HeroService,
        private location: Location
    ) {}

    ngOnInit(): void {
        this.getHero();
    }

    getHero(): void {
        const id = +this.route.snapshot.paramMap.get('id');
        this.heroService.getHero(id)
            .subscribe(hero => this.hero = hero);
    }

    goBack(): void {
        this.location.back();
    }
}

the template:

<div *ngIf="hero">
        <div>HERO: {{ hero }} HERO.ID: {{ hero.id }} HERO.NAME {{ hero.name }}</div>
        <h2>{{hero.name | uppercase}} Details</h2>
        <div><span>id: </span>{{hero.id}}</div>
        <div>
                <label>name:
                        <input [(ngModel)]="hero.name" placeholder="name">
                </label>
        </div>
</div>

<button (click)="goBack()">go back</button>

the class:

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

From what i can tell for some reason angular is not recognizing the json as a single instance of the class Hero, the *ngIf= in the template does get triggered. the getHeroes function in the service works, it returns a multiple entries and i loop through them in the template, is there something fairly obvious that i am missing?

I am fairly new to angular so any help would be appreciated.

Thanks.

You could use ng-repeat to loop over the results, or make getHero return a single object. ng-if might always be true as well so possibly check for the length of the array. — lloyd
– lloyd, Commented Nov 26, 2017 at 11:48
You should subscribe on ngOnInit or use | async pipe in template. — stojevskimilan
– stojevskimilan, Commented Nov 26, 2017 at 12:45
So what does your getHero actually return (JSON) Is it what you have posted up in your question? — AVJT82
– AVJT82, Commented Nov 26, 2017 at 15:19
my json returns [{"id":1,"name":"Mr. Nice"}] but for some reason using Hero instead of Hero[] in the observable, angular does not convert it to the class Hero. i dont understand why, in angular's tutorial it works fine with an array of length 1... — deathlok0000
– deathlok0000, Commented Nov 26, 2017 at 22:42

AVJT82 · Accepted Answer · 2017-11-27 04:45:27Z

1

What you are receiving is an object inside an array, which causes [object Object] in your view. What you want, is to extract that single hero from your response:

getHero(id: number): Observable<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get<Hero[]>(url).pipe(
        map(heroes => heroes[0]) // here!
        tap(_ => this.log(`fetched hero id=${id}, ${url}`)),
        catchError(this.handleError<Hero>(`getHero id=${id}`))
    );
}

answered Nov 27, 2017 at 4:45

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

deathlok0000 Over a year ago

that did it, another solution was to change what i was sending from the backend, single item vs array with 1 item in it. Thank you

AVJT82 Over a year ago

You are welcome! Since it solved your issue, consider accepting the answer by clicking the grey tick under the voting of this answer, which marks the question as solved :)

Collectives™ on Stack Overflow

angular 4 observable returns [object Object]

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