Getting an object from an array of objects

Ionic Framework ionic-v3
1

So i have an array of objects that i return from the server(working with an API), now i want to pass those objects to another page(detailpage) one at a time based on the object(id). So when users click on it, it they are redirected to the detail page and it displays the data for that particular item click upon… am still very new with ionic and i wanna get better in no time.
this is what i have the arrays page

openDetailride()
  {
    this.navCtrl.push(DetailridePage, {
      detail: this.rides.id
    })
  }

and the other page receives this

this.ridedetail = this.navParams.get('detail')
    	this.ride = this.ridedetail.id
    	console.log(this.ride)

but i get the error ‘id’ not defined

2

In your first code snippet you say detail = this.rides.id.
In your second one you get what is in detail. And then you try to read detail.id. But detail only got the ID as it’s value - not an array with a key id.

Look at what console.log(this.ridedetail) returns instead of your last two lines.

3

I have an array of objects but i want to pass one object a time to that set page. I was thinking mapping out the id will pass the object alonside. But it doesn’t work that way.
I have an array [ ] and i wanna pass that object to the next page and then display the data there.

4

Then you have to get the object from your array and pass that one to the page instead of only the ID.

5

Be very careful here if you are ever modifying these objects. It is risky to rely on any particular passing semantics here. Maybe NavController passes a direct object reference, so modifications made by page B will be reflected in the object held in page A (which may or may not be desirable). Maybe it will go through stringification, so the two objects are decoupled. Maybe that will change tomorrow. It’s outside the scope of something you should rely on either way. Program defensively.

6

This is the solution to my above problem
Your html code for master page will look kind of this:

<ion-content>
 <ion-list>
  <ion-item *ngFor="let item of yourArray" (click)="openDetailRide(item.id)">
  </ion-item>
 </ion-list>
</ion-content>

Now you can push that id to your detail page

private openDetailRide(id: number): void {
 this.navCtrl.push(DetailridePage, {id: id});
}

When you apply this to the above problem you get the solution which works perfectly.

For further explanations you can contact me for that. Thanks

7

Anything accessed from templates must be public.

1 Like
8

That works too. thanks for the feedback