Ionic 3 Push New Page with Json Data

Question

I'm fairly new to ionic 3 but essentially I'm looking to push a new page when a button is clicked , then display JSON data to the HTML. Each button I want to identify with an id, so it will display only the data that is related to that id.

For instance -

User clicks Button1 -> Button1 goes to reference screen which displays data that relates only to id 1.

Another Button (button2) which then goes to the reference screen which displays datas that relates only to id 2 (and so on and so on)

My code that relates:

In my levels.html file

 <button id="levels-button5" on-click="goToReference()">
    <ion-icon name="button1"></ion-icon>
    Button 1
  </button>

In my levels.ts file

goToReference(params){
    if (!params) params = {};
    this.navCtrl.push(ReferencePage);
  }

referenceList = [];


//Calling the data from the API and storing it in referenceList[]
getReferences() {
  this.servicesProvider.getReferences().subscribe(data => this.referenceList = data);
}

I have stored JSON data from a REST API into referenceList =[]. From the array i'd like to display description, content and picture. Any help would be greatly appreciated!

Answer 1

goToReference(params)
{
    if (!params) params = {};
    this.navCtrl.push(ReferencePage);
}

while fetch data at ReferencePage

let data = this.navParams.get("data");

Answer 2

i think you need to do like this

<ion-list no-lines>
    <ion-item *ngFor="let item of referenceList; let i = index;">
        <button id="levels-button5" (click)="goToReference(i)">
            <ion-icon name="button1"></ion-icon>
            Button 1
        </button>
    </ion-item>
</ion-list>

and in the .ts file

getReferences(idx:number) {

    // here you can access your list data by index
    // when button is pressed the index of that perticular button is accessible here
    // and from that you pass the data as per your need

    this.servicesProvider.getReferences().subscribe(data => this.referenceList = data);
}

hope it works for you !!