Observable in Angular returns [ Object object ]

Question

I am new to Angular. I saw similar questions here but still cant get the point. In my service i have:

banner(): Observable<String> {
    return this.http.get<String>(`${SERVER_API_URL}/api/banner`);
}

In component:

ngOnInit() {
    this.principal.identity().then(account => {
        this.account = account;
    });

    this.registerAuthenticationSuccess();
    this.craCoreService.banner().subscribe(value => this.banner = value);
}

And html:

<div class="alert alert-warning" *ngSwitchCase="false">
   {{banner}}
</div>

My service method returns simple JSON object with single String property called "banner". But in UI i always get [Object object]. I do not understand how to get value from it. Appreciate any help, thank you.

You might have to do like {{ banner.banner }}

Sivakumar Tadisetti
– Sivakumar Tadisetti

2018-09-18 12:17:45 +00:00
Commented Sep 18, 2018 at 12:17 — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Sep 18, 2018 at 12:17

David · Accepted Answer · 2018-09-18 12:17:50Z

8

If it's an object with the banner property, then you need to use that use property in your TS code

this.craCoreService.banner().subscribe(value => this.banner = value.banner);

answered Sep 18, 2018 at 12:17

David

34.6k13 gold badges90 silver badges124 bronze badges

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

2 Comments

Илья Белейчев Over a year ago

It works, thank you. But i have some trash in console now. Does it easy to fix, or can I ignore it? ERROR TypeError: Cannot read property 'banner' of undefined

Alex Peters Over a year ago

this.craCoreService.banner().subscribe(value => { if (value) this.banner = value.banner; });

Sachila Ranawaka · Accepted Answer · 2018-09-18 12:16:17Z

3

use json pipe to show the object in the template.

<div class="alert alert-warning" *ngSwitchCase="false">  {{banner | json}}</div>

answered Sep 18, 2018 at 12:16

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

Observable in Angular returns [ Object object ]

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related