Single array JSON object will not print

Ionic Framework ionic-v3
1

I am pulling data from an API for recipes, I already have a list of recipes which works fine, however I am now calling for a single recipes details (1 object). My console log below is what the JSON looks like. Whatever I do I cannot get to display on the front end, please help where you can.

JSON

image
Screen Shot 2017-02-13 at 17.26.09.png1692×538 69.7 KB

TypeScript

details: any;

loadDetails() {
  if (this.details) {
    return Promise.resolve(this.details);
  }

  return new Promise(resolve => {
    this.http.get('http://api.yummly.com/v1/api/recipe/Crustless-Ham-Savory-Bake-2005439?_app_id=//////&_app_key=/////')
      .map(res => res.json())
      .subscribe(data => {
        console.log(data);
        this.details = data;
        resolve(this.details);
      });
  });
}

HTML

<ion-content>
    <ion-list>
        <ion-item>
            <h1>{{details.id}}</h1>
        </ion-item>
    </ion-list>
</ion-content>
2

I expect your problem is caused by not initializing details with something containing a referenceable id property before the template attempts to access it.

Not that there is any particular reason for you to care about my opinion, but if you do, please see this thread for what I think is a substantially better way of structuring this general idiom.

3

I needed the “?” symbol that allowed me to pass through the page

4

@BradleyArnott Would you mind providing a bit more clarity? I am running into a similar problem and I have no clue what you mean by “I needed the ‘?’ symbol”. :slight_smile:

5

Elvis operator …

1 Like
6

Thanks @Tommertom - that seems like a bit of a hack - is that consider best practices?

7

Uhh

Depends who u ask

It IS angular tenplate official documented stuff

But I rather not use it myself as I want to control values at initiation/constructor time instead of elvis or ngIf

And it IS the answer to the question :grinning:

1 Like
8

The cat in my avatar photo is a Sphynx. They require periodic baths, yet do not shed. My wife said before we decided to get him that she thinks it is easier to clean a single cat than a whole house, and I feel the same way about the Elvis operator.

If you decide to make the template have to worry about this issue, it’s like the shedding long-hair cat. You have to diligently use ?. on every reference in the template, whereas if you initialize the backing property to some sane dummy value, that needs only be done in one place, and then you don’t have to worry about it anywhere in the template.

2 Likes