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;
    });
  } 
}

Answer 1

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}}