Passing data from api to another page (PLEASE HELP!)

Ionic Framework ionic-v3
1

Dear Master,

i want to passing data API from page one to page two.
let say i have data from API like this:

categories:[
{
id: 001
main_id: 001
depth: 0
name: Man
},{
id:002
main_id: 002
depth: 0
name: women
{
id: 003
main_id:001
depth: 1
name: business_man
},{
id:004
main_id: 002
depth: 1
name: business_girl
}
]

and when i serve the ionic the output of first page will printed like this:

  1. man 1
  2. women 2

HTML code of PageOne like this:

 <ion-item class="tab2-selectCategory" *ngFor="let takeData of category; let i=index" >
      
      <button (tap)=depth1()>{{i+1}} {{takeData.name}}  {{takeData.id}}</button> 
    </ion-item>

and PageOne.ts File like this:

let filter = [];

            filter.push({
                field: 'depth',
                operator: '=',
                value: '0',
                mode: 'and'
            });
    
  let param = { 
    
    api_token: '086090c7-2c12-4f00-9ac1-'',
    select: 'id,depth,name',
    filter: JSON.stringify(filter)
};  
let apiUrl = 'http://127.0.0.1/dev_inventory_1/public/api/v1/categories';

this.httpClient.post(apiUrl, null, {params: param}).subscribe(
getData => {
    this.kategori = getData['categories'];
    loader.dismiss();
depth(){
this.navCtrl.push(PageTwo)
}

the question is how to send the id from page one to page two?
so, when i click 1.Man , the id (by tapped) passing to second page. in second page the sistem will print:
Business Man

and when click 2. Women (in page one) the page two will print:
Business Girl

thanks for your helping.
Regards
Andre

2 
this.httpClient.post(apiUrl, null, {params: param}).subscribe(
getData => {
    this.kategori = getData['categories'];
    loader.dismiss();
});

<ion-item class="tab2-selectCategory" *ngFor="let kategori of category; let i=index" >
  <button (tap)=depth(category)>{{i+1}} {{takeData.name}}  {{takeData.id}}</button> 
</ion-item>

Try to reading the documentation https://ionicframework.com/docs/api/navigation/NavController/

To send params you should use:

depth(category){
    // push another page onto the navigation stack
    // causing the nav controller to transition to the new page
    // optional data can also be passed to the pushed page.
    this.navCtrl.push(PageTwo, category);
  }

To get the params on the page two use this

class PageTwo {
  constructor(private navParams: NavParams) {
    this.category = navParams.get('category');
  }
}

hope this helps.

1 Like
3

Hi,

Thanks for your reply.
but how to passsing Variable ID in category?

4

Is already in this.category = nav.params.get(‘category’)

console.log(this.category.id);
5

i have done with that issue, with code like this:

**Page One**
depth1(takeData){
  this.navCtrl.push(CategoryDepth2Page, {
     id:takeData.id 
   });

**Page Two**
 let filter = [];
  
          filter.push({
            field: 'depth',
            operator: 'eq',
            value: '2',
            mode: 'and'
            });
          filter.push({
            field: 'category_id',
            operator:'eq',
            ** value: this.navParams.get('id'),**
            mode: 'and'
      });
1 Like