CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2
aaa
aaa

Reputation: 858

ionic2 - unable to retrieve/display data using navcontroller

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);
        });
    });
}

Upvotes: 0

Views: 84

Answers (3)

robbannn
robbannn

Reputation: 5013

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 });
    }
}

Upvotes: 1

enRaiser
enRaiser

Reputation: 2636

I am just writing what is working in my case, may be it help you.

 this.navCtrl.push(SecondPage,{item : xyz});//In First Page

and in constructor of second page us

  this.item = params.data.item;// In second page

Upvotes: 0

Jaydeep Kataria
Jaydeep Kataria

Reputation: 867

in this.navCtrl.push('SecondPage',param); shoud SecondPage import in first.ts file like this should be import{ SecondPage } from '../second/second' and its class name gives to this.navCtrl.push(SecondPage,param);

Hope this should be help!

Upvotes: 0

Related Questions