Reading data from storage and display

Ionic Framework ionic-v3
1

I’m reading some data from Storage and after its done I want to display to the user. When I do a console.log I can see the object but when I try to display on the html I cannot see it. Here is the code.

import { Component,ViewChild } from '@angular/core';
import { NavController,Nav } from 'ionic-angular';
import { Setup } from '../frameSetup/setup';
import { Storage } from '@ionic/storage';

@Component({
  templateUrl: 'page1.html'
})
export class Home {
  deviceObj = [];
  setupPage = Setup;

  constructor(public navCtrl: NavController, private storage: Storage) {
    //this.storage.remove('deviceInfo');
    this.getData();
  }

  getData(){
    this.storage.get('deviceInfo').then((resp) => {
      if(resp !== null){
        console.log(resp);
        this.deviceObj.push(resp);
      }
    });
  }
}

On my html I have the following.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p *ngFor="let x of deviceObj">
    {{x.frameName}}
  </p>
</ion-content>

If I do not read the data from the storage and just hardcode the array of object it works fine, but I want to get data from the Storage and display.

Thanks for the help
-Ennio

1 Like
2

Hello Ennio,

have you tried this.deviceObj = resp; instead of this.deviceObj.push(resp)?

3

try this:

  let that = this;
  this.storage.get('deviceInfo').then((resp) => {
      if(resp !== null){
        console.log(resp);
        that.deviceObj.push(resp);
      }
  });
4

ahh, that did. Sorry I guess working late on this does not help :slight_smile:

5

We know how that is… :grin:

6

I am a beginner to ionic so can you tell me what is frameName in {{x.frameName}}.