In my ionic app I tried passing array returned from a php api to another page but it was not passing any values
In user.html page I have the button that when click pass the value to the next page
<button ion-button icon-only (click)="goToResult()">
<ion-icon ios="ios-log-out" md="md-log-out" class="user"></ion-icon> Next
</button>
userHome.ts
ngOnInit(){
this.phone = this.navParams.get('phone');
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
let options = new RequestOptions({ headers: headers });
let data = {
phone: this.phone
};
let loader = this.loading.create({
content: 'Loading Page Contents',
});
loader.present().then(() => {
this.http.post('http://mypro.com/eApi/retrieve.php',data, options)
.map(res => res.json())
.subscribe(res => {
loader.dismiss()
this.items=res.server_response;
console.log(this.items);
});
});
//this.navCtrl.push(PostPage, data);
}
On the same page, this is the push nav I tried passing the values through
goToResult(){
console.log(this.items);
this.navCtrl.push(PostPage,
this.postList = this.items
)
}
In post.ts, I added this to the contructor
this.navParams.get(this.postList);
then in my post.html
<ion-title *ngFor="let post of postList">{{post.Name}}
</ion-title>
Please, how can I pass the return values from the api to another page?
Thanks.
So if you check ionic doc example you will see that you need to pass data using json object and use its key to retrieve data, try this approach:
In your first component:
this.navCtrl.push(PostPage,
{ postList: this.items }
)
In receiving component constructor;
this.postList = this.navParams.get(“postList”);
If still struggle please share full code, but this should be easy fix;)
you can do like this
goToResult(){
console.log(this.items);
this.navCtrl.push(PostPage, {postList = this.items})
}
In post.ts, you can get value by
this.navParams.get('postList');