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

**URL:** <https://forum.ionicframework.com/t/passing-data-from-api-to-another-page-please-help/153083>\
**Category:** ionic-v3\
**Created:** [January 14, 2019, 11:12am UTC](https://forum.ionicframework.com/t/passing-data-from-api-to-another-page-please-help/153083 "2019-01-14T11:12:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreasTedja](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@andreasTedja](https://forum.ionicframework.com/u/andreasTedja)\
**Post date:** [January 14, 2019, 11:12am UTC](https://forum.ionicframework.com/t/passing-data-from-api-to-another-page-please-help/153083/1 "2019-01-14T11:12:43Z")

</div>

Dear Master,

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

```auto
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:

```auto
 <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:

```auto
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

---

<div class="post-metadata">

**Author:** ![salvatojalva](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/salvatojalva/32/123793_2.png) [@salvatojalva](https://forum.ionicframework.com/u/salvatojalva)\
**Post date:** [January 14, 2019, 3:33pm UTC](https://forum.ionicframework.com/t/passing-data-from-api-to-another-page-please-help/153083/2 "2019-01-14T15:33:51Z")

</div>

```auto
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/](https://ionicframework.com/docs/api/navigation/NavController/)

To send params you should use:

```auto
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

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

```

hope this helps.

---

<div class="post-metadata">

**Author:** ![andreasTedja](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@andreasTedja](https://forum.ionicframework.com/u/andreasTedja)\
**Post date:** [January 15, 2019, 3:20am UTC](https://forum.ionicframework.com/t/passing-data-from-api-to-another-page-please-help/153083/3 "2019-01-15T03:20:40Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![salvatojalva](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/salvatojalva/32/123793_2.png) [@salvatojalva](https://forum.ionicframework.com/u/salvatojalva)\
**Post date:** [January 15, 2019, 3:54am UTC](https://forum.ionicframework.com/t/passing-data-from-api-to-another-page-please-help/153083/4 "2019-01-15T03:54:19Z")

</div>

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

```auto
console.log(this.category.id);

```

---

<div class="post-metadata">

**Author:** ![andreasTedja](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@andreasTedja](https://forum.ionicframework.com/u/andreasTedja)\
**Post date:** [January 15, 2019, 7:08am UTC](https://forum.ionicframework.com/t/passing-data-from-api-to-another-page-please-help/153083/5 "2019-01-15T07:08:30Z")

</div>

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

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

```

```auto
**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'
      });

```