[SOLVED] ionic2 – unable to retrieve/display data using navcontroller

Issue

I am unable to display the data I get from NavParams. I use console.log() and check that I did get the data I wanted but unable to display in the new page.

I think I might had make some mistake during the passing of data, but not sure what did I do wrong.

first.ts

import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LocationsProvider } from '../../providers/locations/locations';

...

    constructor(
        public locations: LocationsProvider,
        public viewCtrl: ViewController,
        public navCtrl: NavController, 
        public actionSheetCtrl: ActionSheetController,
        public http: Http,
        public navParams: NavParams,
    ) { }

    newEntry(param){
        this.navCtrl.push('SecondPage',param);
    }

    openActSheetjob_Type(){
        let actionsheet = this.actionSheetCtrl.create({
            title:"Type",
            buttons:[
                {
                    text: 'Hour',
                    handler: () => {
                        let Hourly = "Hourly";  
                        let results =  this.locations.getData(Hourly);
           
                        console.log(results); // data goten

                        this.newEntry({ record: results });   //Suspect mistake
                    }
                }
            ]
        });
        actionsheetjob_type.present();
    }

Second.html

<ion-list >
    <ion-item *ngFor="let list of this.results">
        <h2>{{ list.Title }}</h2>
        <p>{{ list.Type }}</p>
    </ion-item>
</ion-list>

Second.Ts

ionViewDidLoad(){
    console.log(this.NP.get("record")); //Get NULL
}

locations.ts

//function to get data
data:any;

getData(jobType){
    if (this.data) {
        return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
        this.http.get('http://localhost/getType.php?Type=' + Type)
        .map(res => res.json())
        .subscribe(data => {
            this.data = data;
            console.log(this.data);
            resolve(this.data);
        });
    });
}

Solution

Since getData returns a Promise it is asynchronous. console.log(results) and this.newEntry({ record: results }) will run before results has a value. And with your code it will not even have the value you think. You can get the value in the then function that will be called when the Promise resolves.

handler: () => {
    let Hourly = "Hourly";  
    this.locations.getData(Hourly)
    .then(results => {
        console.log(results);
        this.newEntry({ record: results });
    }
}

Answered By – robbannn

Answer Checked By – Cary Denson (BugsFixing Admin)