title: ionic 2 - Display data in template after it’s loaded from Promise
body: <p>I'm using File plugin function <code>readAsText()</code> to convert my JSON file to string, then parse it to object and simply store it in a local variable which i then want to display in HTML template. Problem is the function <code>readAsText()</code> returns a Promise so when I'm displaying the variable its still undefined and data hasn't loaded yet.</p>
  
  <p>My home.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController} from 'ionic-angular';
  import { File } from '@ionic-native/file';
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html',
  })
  
  export class HomePage {
      object: any;
  
      constructor(
          public navCtrl: NavController,
          public file: File,
      ) {
          // process that returns string, parses it into object and saves it into variable "object"
          this.file.readAsText("file:///android_asset/www/assets/json", "Choosing_Values.json")
          .then( result =&gt; {
              this.object = JSON.parse(result);
              console.log("Object: ", this.object);      // data is loaded
          }).catch( err =&gt; console.error("file wasn't read", err));
        }
  </code></pre>
  
  <p>And my HTML template:</p>
  
  <pre><code>&lt;ion-content&gt;
  ...
  
  &lt;p&gt;Object: {{object.COMPANY.COPMANY_NAME}}&lt;/p&gt;     &lt;!-- the data is still undefined because the promise hasnt assigned the value in time--&gt;
  
  ...
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>How can I "wait" for the promise to finish loading the data, and display the variable only after it contains the object with the data ?</p>