Trying to render JSON in HTML in Angular2

Question

I'm trying to render a returned JSON from the backend in to HTML {{ object.x }}, I'm using BehaviourSubject in my shared-service where I call the API endpoint of the list I'm trying to render.

public storesChanged = new BehaviorSubject([]);

public getStores(): void {
  this.retrieveResults().subscribe((results) => {
    this.storesChanged.next(results.Results)
      console.log('Name >> ', results.Results[0].Name) // this shows me the Name
  });
}
public retrieveResults(): Observable<any> {
  return this.http.get('/api/Stores/Summary')
  .map(res => res.json())
}

using this service:

this.sharedService.storesChanged.subscribe((res) => {
  this.currentStore = res.find((x) => x.Id === this.storeId)
  // this returns the object based on the Id which should be able to use in my HTML
})

This is the object which I'm trying to render in HTML {{ currentStore.Name }} however it's returning an error Cannot read property 'Name' of undefined.

{
   'Id': 1,
   'Name': 'Eastleigh'
}

I'm quite confused why its returning 'Name' of undefined when the property is in the object. Can someone point-out the cause.

{{ currentSore.Name }} -> {{ currentStore.Name }} you have a typo — eko
– eko, Commented Jan 18, 2017 at 11:11
@echonax what that worked, not sure what's the elvis operator though? Mind giving a small explanation? — MrNew
– MrNew, Commented Jan 18, 2017 at 11:13
Elvis operator guards against "property not found". If "name" doesn't exist on currentStore, it will stop trying to evaluate it (and any other props that follow it) saving you from horrible errors. This way when "name" is eventually available, you'll get what you expect. — Tim Consolazio
– Tim Consolazio, Commented Jan 18, 2017 at 11:17

eko · Accepted Answer · 2017-01-18 11:22:51Z

1

Since your currentStore object is received asynchronously, you can use the "elvis" operator like this

{{ currentStore?.Name }}

"elvis" or safe navigation operator will check your object if it's null/undefined or not. And when it's defined, angular will try to access the property you have selected (Name).

Source: https://en.wikipedia.org/wiki/Safe_navigation_operator

edited Jan 18, 2017 at 11:22

answered Jan 18, 2017 at 11:15

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

7 Comments

MrNew Over a year ago

Thanks sounds like a handy operator to do a check.

eko Over a year ago

@MrNew It really makes your life easier when you deal with async operations in angular2 :-)

MrNew Over a year ago

Hi, just one more question about this I know its old. Now that its showing the storeName, somehow it doesn't always update the {{ currentStore?.Name }} sometimes I have to refresh the page for it to update.

eko Over a year ago

@MrNew Hmm, can't say anything without seeing the use-case. Maybe you are getting an error in the console? Can you create a new question that elobarates the issue?

MrNew Over a year ago

I created a new question about it stackoverflow.com/questions/41818222/…

|

Collectives™ on Stack Overflow

Trying to render JSON in HTML in Angular2

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related