Having issues with Instance Variabled


#1

Hi guys, I am so confused.
this is my second Ionic application and its really killing me cause i don’t know what i am doing wrong.

this is my TS class
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { Storage } from ‘@ionic/storage’;
import {AppEngineProvider} from ‘…/…/providers/app-engine/app-engine’;
import ‘rxjs/Rx’;

/**

@IonicPage()
@Component({
selector: ‘page-orders’,
templateUrl: ‘orders.html’,
})
export class OrdersPage {
public Orders:any;
public userid:any;
public clientid:any;

constructor(public navCtrl: NavController, public navParams: NavParams,public storage:Storage,public engine:AppEngineProvider) {

}

ionViewDidLoad(){
console.log(‘ionViewDidLoad OrdersPage’);
this.getorders();
console.log(“orders”+this.Orders); this returns undefined

}

getorders(){
this.storage.ready().then(() => {
this.storage.get(‘user’).then((data)=>{
let dataz=JSON.parse(JSON.stringify(data));
let userid=dataz[0].user_id;
let clientid=dataz[0].workingfor;
this.engine.getorders(userid,clientid).subscribe(data=>{
this.Orders=data;
console.log(this.Orders); this logs the data
});
});
});

}

}


#2
this.storage.get(‘user’)

return a promise (see documentation https://ionicframework.com/docs/storage/) which means, summarized or schematized, that this method doesn’t return a synchronous or instant result but that the work gonna be done in an asynchronously way.

that’s the reason why you find the undefined in the first console.log

for example a pseudo code

 console.log('1');
 this.something.then(() => { setTimeout(() => {console.log('2');}, 400); });
 console.log('3');

this would return

1
3
2

that being said, you could maybe do something like following of your code:

ionViewDidLoad() {
  this.storage.ready().then(() => { // <-- Just moved that here for convenience
      this.getorders().then(() => {   // <-- There no more instant, wait for promise
          console.log(“orders”+this.Orders);
      });
  });
}

getorders() : Promise<{}> { // <--- Transform method in a promise return
   return new Promise((resolve) => {   // <-- Add the promise return block
          this.storage.get(‘user’).then((data)=>{
             let dataz=JSON.parse(JSON.stringify(data));
             let userid=dataz[0].user_id;
             let clientid=dataz[0].workingfor;
             this.engine.getorders(userid,clientid).subscribe(data=>{
                  this.Orders=data;
                  resolve(); // <-- Here we say we are done
             });
       });
  });                      
}

P.S.: If I may, next time you post a piece of code, plz indent all code lines with four spaces at the begin of each line, that gonna format it and make it more easy to read or copy

P.P.S.: Noticed too that this.Orders begin with a capital later, not a killer problem but I think it’s good to stick to variables beginning with small letters, this.orders


#3

Thank you, let me try this out