CODEWITHSUNDEEP
htmljsontypescriptionic-framework
Gopal iOS
Gopal iOS

Reputation: 97

how to show the json description respective id in ionic 3

I have json a file like 

[{
    "id": "1",
    "title": "Abba Father (1)",
    "description": "Abba Abba Father."
},
{
    "id": "2",
    "title": "Abba Father, Let me be (2)",
    "description": "Abba Father, Let me be (2) we are the clay."
},
{
    "id": "3",
    "title": "Abide with me (3)",
    "description": "Abide with me (3) we are the clay."
}]

I am able to show the description in next page when user clicked on the title list in home page. But in next page I have next and previous buttons, when user clicked on next button I need to show the next description. could any one guide me to do this task

I am using this project to implement this.

https://github.com/kristofferandreasen/simple-ionic-3-app

constructor(
    public navCtrl: NavController,
    private navParams: NavParams,
    // private itemApi: ItemApi
)
{
    this.item = this.navParams.data;
    console.log(this.item);
    console.log(this.item.id)
}


navigatePrivious($event, item)
{
    this.navCtrl.push(SingleSongPage, item);
}

navigateNext($event, item)
{
    this.navCtrl.push(SingleSongPage, item);
}

enter image description here

Upvotes: 1

Views: 62

Answers (1)

Martin Schneider
Martin Schneider

Reputation: 15388

On your SingleSongPage you get only one item passed via NavParams service.
So the only thing you have, to indicate what the next and the previous item is, is the current item.

You will get both items only from the ItemApi service now.
So uncomment and use it:

ionViewDidLoad() {
    this.itemApi.getItems().then(data => {
        let currentIndex = data.indexOf(this.item);
        if (currentIndex > -1) {
            this.nextItem = data[currentIndex + 1];
            this.previousItem = data[currentIndex - 1];
        }
    });
}

And in your view, pass the nextItem and previousItem as parameter:

<ion-button (click)="navigate($event, previousItem)">Previous Item</ion-button>
<ion-button (click)="navigate($event, nextItem)">Next Item</ion-button>

(your navigateNext and navigatePrivious functions became navigate).

Of course, I guess, it is not the best practise to load all items on every load of SingleSongPage. The itemApi service or any other service should hold/cache all (or an excerpt of all) items instead.
Or the API should provide something like getNextSong(currentId: number): SongItem.
But in case of this static json file or mockup data, it is okay.

Upvotes: 1

Related Questions