How to parsing data to page by ID

Ionic Framework ionic-v3
1

i have a problem when i make parsing data to another page with navparams. how can i get one id if i click one detail button and so on?
https://github.com/yandifao/app/blob/master/Untitled.png

my.ts

  ionViewWillEnter(){ 
    this.storage.get('taharrim_m').then((prof) => {
      this.datauser = JSON.parse(prof);
      this.offset = 0;
      this.limit = 10;
      this.id = this.datauser[0].id;
      this.authService.getAll('transaksi',this.id,0,this.offset,this.limit).then((datatrx) => {
        this.data = datatrx;
        this.trxList = this.data;
        //console.log(this.beritaList);
       // this.berita_isi_prev = this.berita.berita_isi_prev.substr(0,200)+'...';
      }).then(() => {
       // console.log(this.berita_isi_prev);
      });
    });
  }  

 detailTrxPpob($event, ppob){
    this.navCtrl.push(TrxDetailPage, {
      ppob: this.trxList });
  }

my.html

 <ion-refresher (ionRefresh)="doRefreshPpob($event)">
        <ion-refresher-content
          pullingIcon="arrow-dropdown"
          pullingText="Pull to refresh"
          refreshingSpinner="circles"
          refreshingText="Refreshing...">
    </ion-refresher-content>
    </ion-refresher>

    <ion-card *ngFor="let trx of trxList" >
        <!-- <img src="assets/img/slide_02.png" height="60"/> -->
        <ion-row>
            <ion-col col-3>
              <br><br>
            <img src="{{ trx.trx_status == 0 ? '../../../assets/img/pending.png' : (trx.trx_status == 1 ? '../../../assets/img/pending.png':(trx.trx_status == 2 ? '../../../assets/img/proses.png':(trx.trx_status == 5 ? '../../../assets/img/sukses2.png':'../../../assets/img/gagal.png'))) }}" style="weight:10px">
            </ion-col>
            <ion-col col>
         <ion-card-content>
             <b>{{ trx.produk_id }}</b>
             <p><i style="font-size:9px">{{ trx.trx_tgl }}</i></p><hr>
             Harga :<b> {{ trx.trx_harga | number:0 }}</b><br>
             Nomor :<b> {{ trx.trx_msisdn }} </b>
            <!-- <p *ngIf="trx.trx_sn"> SN : <b>{{ trx.trx_sn }}</b></p>-->
         </ion-card-content>
         </ion-col>
         </ion-row>
         <ion-item>
         <hr>
            <ion-row>
                <ion-col col-3>
                </ion-col>
                <ion-col col>
                  <button ion-button>SAVE</button>
                </ion-col>
                <ion-col col>
                  <button ion-button color="biru" (click)="detailTrxPpob($event, ppob)">Detail</button>
                </ion-col>
            </ion-row>
         </ion-item>
       </ion-card>

data.ts

  ionViewWillEnter(){
    this.ppob = this.navParams.get('ppob');
    console.log(this.ppob);
    this.trx_msisdn = this.ppob.trx_msisdn;
    this.trx_id = this.ppob.trx_id;
    this.trx_tgl = this.ppob.trx_tgl;
    this.produk_id = this.ppob.produk_id;
    this.trx_harga = this.ppob.trx_harga;
    this.status = this.ppob.trx_status;
  }

data.html

<ion-card>
        <!--<img src="../../assets/img/bjork-live.jpg"/>-->
        <ion-card-content class="headertrx">
          <ion-card-title>
              {{ trx_msisdn }}<br>
              {{ trx_id }}
          </ion-card-title>
              {{ trx_tgl }}
        </ion-card-content>
    <hr>
        <ion-item class="allheader">
          {{ produk_id }}
          <ion-badge item-end>Produk</ion-badge>
        </ion-item>

        <ion-item class="allheader">
          {{ trx_msisdn }}
          <ion-badge item-end>Nomor/IDPel</ion-badge>
        </ion-item>
        
        <ion-item class="allheader">
           Rp. {{ trx_harga | number:0 }}
            <ion-badge item-end>Harga</ion-badge>
          </ion-item>
  
          <ion-item class="allheader">
            {{ trx_status }}
            <ion-badge item-end>Status</ion-badge>
          </ion-item>
          
          <ion-item class="allheader">
              {{ trx_sn }}
              <ion-badge item-end>SN</ion-badge>
            </ion-item>
            <hr>
            <ion-row>
              <ion-col>
                  <button ion-button color="biru">CETAK</button>
              </ion-col>
            </ion-row>
              
              
    </ion-card>
2

my.ts

ionViewWillEnter(){ 
    this.storage.get('taharrim_m').then((prof) => {
      this.datauser = JSON.parse(prof);
      this.offset = 0;
      this.limit = 10;
      this.id = this.datauser[0].id;
      this.authService.getAll('transaksi',this.id,0,this.offset,this.limit).then((datatrx) => {
        this.data = datatrx;
        this.trxList = this.data;
        //console.log(this.beritaList);
       // this.berita_isi_prev = this.berita.berita_isi_prev.substr(0,200)+'...';
      }).then(() => {
       // console.log(this.berita_isi_prev);
      });
    });
  }  

 detailTrxPpob(trx){
    this.navCtrl.push(TrxDetailPage, { trx });
  }

my.html

<ion-refresher (ionRefresh)="doRefreshPpob($event)">
        <ion-refresher-content
          pullingIcon="arrow-dropdown"
          pullingText="Pull to refresh"
          refreshingSpinner="circles"
          refreshingText="Refreshing...">
    </ion-refresher-content>
    </ion-refresher>

    <ion-card *ngFor="let trx of trxList" >
        <!-- <img src="assets/img/slide_02.png" height="60"/> -->
        <ion-row>
            <ion-col col-3>
              <br><br>
            <img src="{{ trx.trx_status == 0 ? '../../../assets/img/pending.png' : (trx.trx_status == 1 ? '../../../assets/img/pending.png':(trx.trx_status == 2 ? '../../../assets/img/proses.png':(trx.trx_status == 5 ? '../../../assets/img/sukses2.png':'../../../assets/img/gagal.png'))) }}" style="weight:10px">
            </ion-col>
            <ion-col col>
         <ion-card-content>
             <b>{{ trx.produk_id }}</b>
             <p><i style="font-size:9px">{{ trx.trx_tgl }}</i></p><hr>
             Harga :<b> {{ trx.trx_harga | number:0 }}</b><br>
             Nomor :<b> {{ trx.trx_msisdn }} </b>
            <!-- <p *ngIf="trx.trx_sn"> SN : <b>{{ trx.trx_sn }}</b></p>-->
         </ion-card-content>
         </ion-col>
         </ion-row>
         <ion-item>
         <hr>
            <ion-row>
                <ion-col col-3>
                </ion-col>
                <ion-col col>
                  <button ion-button>SAVE</button>
                </ion-col>
                <ion-col col>
                  <button ion-button color="biru" (click)="detailTrxPpob(trx)">Detail</button>
                </ion-col>
            </ion-row>
         </ion-item>
       </ion-card>

data.ts

ionViewWillEnter(){
    this.ppob = this.navParams.get('trx');
    console.log(this.ppob);
    this.trx_msisdn = this.ppob.trx_msisdn;
    this.trx_id = this.ppob.trx_id;
    this.trx_tgl = this.ppob.trx_tgl;
    this.produk_id = this.ppob.produk_id;
    this.trx_harga = this.ppob.trx_harga;
    this.status = this.ppob.trx_status;
  }

Check the updated code.

3

woahh thank you guys, you save me :joy:

4

I find this code really hard to read. I would set defaults for offset and limit at initialization time, because they do not depend on the result of the storage retrieval. I don’t know how datauser is used, but it is a source of errors to not have a clear way to do things when we know when it is reliable, and we do not have one here. There is no need to manually parse things coming out of storage; ionic-storage does this for us.

So we have one operation that gets things from storage, and a second that retrieves something from authService based on a single property that was part of the first operation. Don’t store the same thing in two places: get rid of either data or trxList, and I would get rid of data because the name is terrible as it conveys no meaning.

That leaves us with something like this:

this.storage.get('taharrim_m')
.then((prof) => {
  this.datauser = prof;
  return this.datauser[0].id;
})
.then((id) => this.authService.getAll('transaksi', id, 0, this.offset, this.limit))
.then((trx) => this.trxList = trx);

This makes it more explicit what information is being passed along at each stage of the chain.

1 Like