Single array JSON object will not print (Ionic 2)

Question

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.

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>

Pagename.ts

@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
  providers: [ApiAuthentication]

})
export class DetailsPage {

  public api: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication) {
    this.loadRecipes();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailsPage');
  }

  loadRecipes(){
    this.apiAuthentication.loadDetails()
    .then(data => {
      this.api = data;
    });
  } 
}

I dont see description anywhere in the returned object. you need a key to access try details.id forst to see if id is printing — Aniruddha Das
– Aniruddha Das, Commented Feb 13, 2017 at 17:33
@AniruddhaDas Sorry I have now changed to ID (was messing with other values) I get an error of Cannot read property 'id' of undefined — BA1995
– BA1995, Commented Feb 13, 2017 at 17:39
@BA1995. It's a classic case of async value: your template tries to access details.id before details is actually defined (it is NOT assigned immediately since it is the result of an async cold). Try {{details?.id}} in your template. — AngularChef
– AngularChef, Commented Feb 13, 2017 at 17:49
Use the elvis operator (?) like this to avoid that error <h1>{{details?.id}}</h1>. That's because the promise is not yet resolved when trying to print the id. — sebaferreras
– sebaferreras, Commented Feb 13, 2017 at 17:49
@AngularFrance Thankyou for this, I now have lost the error in console. As you can tell I'm new to this, advice on moving forward? — BA1995
– BA1995, Commented Feb 13, 2017 at 17:59

AVJT82 · Accepted Answer · 2017-02-13 19:20:12Z

2

You are trying to display

<h1>{{details.id}}</h1>

when you have in fact your object in api:

loadRecipes(){
  this.apiAuthentication.loadDetails()
    .then(data => {
      this.api = data; // you store it in api!
  });

so this should probably be cleared out by just changing your template a bit:

<h1>{{api.id}}</h1>

and perhaps add the safe navigation operator here as well. {{api?.id}}

answered Feb 13, 2017 at 19:20

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

2 Comments

BA1995 Over a year ago

Thats great! I didn't realise ? can get you through the error

AVJT82 Over a year ago

The safe navigation operator guards null values, you can read more here: angular.io/docs/ts/latest/guide/… You'll get used to using this A LOT with Angular since we are constantly dealing with async :)

Aniruddha Das · Accepted Answer · 2017-02-13 17:57:29Z

0

You are actually trying many thing and can be done with one of the tings.

you are using both promise and observable and you can avoid one of them. I would say use observable as it comes by default.

loadDetails() {
  if (this.details) {
    return null;
  }

  this.http.get('http://api.yummly.com/v1/api/recipe/Crustless-Ham-Savory-Bake-2005439?_app_id=//////&_app_key=/////')
      //.map(res => res.json())  // you don't need this
      .subscribe(data => {
        console.log(data);  // make sure the data is the object you are expecting and have the id property
        this.details = data; // not necessary if you will use async pipe
      });
  });
}

here details.id should be available.

answered Feb 13, 2017 at 17:57

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

1 Comment

BA1995 Over a year ago

Hi, I have edited my question to include the more code pulling that function, I do also need the .map(res => res.json()) to convert the json into an object

Collectives™ on Stack Overflow

Single array JSON object will not print (Ionic 2)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related