ionic2 - unable to retrieve/display data using navcontroller

Question

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

robbannn · Accepted Answer · 2017-07-31 09:20:12Z

1

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

edited Jul 31, 2017 at 9:20

answered Jul 31, 2017 at 8:10

robbannn

5,0231 gold badge35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaydeep Kataria · Accepted Answer · 2017-07-31 07:34:12Z

0

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!

answered Jul 31, 2017 at 7:34

Jaydeep Kataria

86710 silver badges23 bronze badges

1 Comment

sebaferreras Over a year ago

I'm afraid this is not correct. If you use lazy load pages/modules, you must use the string name of the Page ('SecondPage' instead of SecondPage).

Sachin Sharma · Accepted Answer · 2017-07-31 08:08:32Z

0

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

answered Jul 31, 2017 at 8:08

Sachin Sharma

2,6462 gold badges24 silver badges40 bronze badges

Collectives™ on Stack Overflow

ionic2 - unable to retrieve/display data using navcontroller

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related