title: Single array JSON object will not print (Ionic 2)
body: <p>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 (<strong>1 object</strong>). 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.</p>
  
  <p><a href="https://i.stack.imgur.com/H5vat.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H5vat.png" alt="JSON"></a></p>
  
  <p>TypeScript</p>
  
  <pre><code>details: any;
  
  loadDetails() {
    if (this.details) {
      return Promise.resolve(this.details);
    }
  
    return new Promise(resolve =&gt; {
      this.http.get('http://api.yummly.com/v1/api/recipe/Crustless-Ham-Savory-Bake-2005439?_app_id=//////&amp;_app_key=/////')
        .map(res =&gt; res.json())
        .subscribe(data =&gt; {
          console.log(data);
          this.details = data;
          resolve(this.details);
        });
    });
  }
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;ion-content&gt;
      &lt;ion-list&gt;
          &lt;ion-item&gt;
              &lt;h1&gt;{{details.id}}&lt;/h1&gt;
          &lt;/ion-item&gt;
      &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Pagename.ts </p>
  
  <pre><code>@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 =&gt; {
        this.api = data;
      });
    } 
  }
  </code></pre>