[SOLVED] Problem in Accessing Array Index inside other Array

I have problem inside array that looping inside array.
This my html code:
<ion-navbar *navbar>
Daftar Kuliner

<ion-content padding class="kuliner-index">
  <ion-list *ngFor="let jen of jenis; let i = index">
    <ion-list-header>{{jenisNama[i]}} </ion-list-header>
    <ion-item  *ngFor="let kuliner of kuliners[i]">
        <img src="{{kuliner.main_img}}" style="width:50px;height:50px;margin:auto" >
        {{kuliner.nama}}<br/>
        <ion-icon name="md-star"></ion-icon> {{kuliner.rating}} / 5.00
    </ion-item>
    <br/><br/>
  </ion-list>
</ion-content>

The problem is in kuliners[i] variable. Each seems like wrong access inside kuliners and each time i am refreshing kuliners[i]. It is like random access. I want for jenis[0], the kuliners that accessed is kuliners[0].

This is my ts file:

@Page({
  templateUrl: 'build/pages/kuliner-index/kuliner-index.html',
  providers: [KulinerService]
})
export class KulinerIndexPage {
  public jenis : Number[] =null;
  public jenisNama : String[] = null;
  public jenisShow : boolean[] = null;
  public kuliners: Array<any> = null;
  private timer ;
  constructor(public nav: NavController, public kulinerService : KulinerService) {
    this.jenis = [1,2,3,4];
    this.jenisNama = ['Appetizer (Hidangan Pembuka)','Main Course (Hidangan Utama)','Dessert (Hidangan Penutup)','Minuman Spesial'];
    this.kuliners = new Array<any>();
    this.jenisShow = new Array<boolean>();
    this.loadKuliner();
  }

  loadKuliner()
  {
      for(var i=0;i<this.jenis.length ; i++)
      {
        alert(this.jenisNama[i]);
          this.kulinerService.loadKulinerByJenis(this.jenis[i])
            .then(dataResto => {
                this.kuliners.splice(i, 0, dataResto);
                this.jenisShow.push(false);
          })
      }   
  }
}

The last strange things is when i use the alert inside looping in loadKuliner() method the kuliners is accessed correctly. But if i am remove the alert , the kuliners is become wrong again (like random). Thanks…

Example is i have kind food Dessert (index 0) and Main Course (index 1). The food(Kuliners) in dessert is chocolate and ice cream. The food (kuliners) in main course is sirloin steak and pizza. When i show the data, sometimes is when in index 0 the kuliners is chocolate and ice cream and sometimes become the sirloin steak and pizza. I have try debug and try the service (php file) and seems the data is right. Maybe the problem when push to array? Or when load the array maybe?

Shouldn’t you assign

this.kuliners.splice(…)

back to

this.kuliners

so that it’s actually changed?

First i have try with normal .push to array. I think the problem in push method so i change it to splice but still have same problem

Could you provide us with some sample data the way you get it from the server? This may help with understanding what you actual trying to archieve.

Here the example data from server :
[{"item_ID":"10009","nama":"Brownie Bite","main_img":"img\/Food\/Desserts_Brownie_Bite.jpg","harga":"40000","deskripsi":"Yummie...","points":"4","favorit":"2","rating":"4.25","rater":"1","tgl_post":"2016-01-15 00:00:00"}

Just to make sure, you have data like this:

[ //wrapper array
    [dessert1, dessert2], //dessertArray
    [mainCourse1, mainCourse2] //mainCourseArray
]

and now you want to loop through the wrapper array and loop through wrapperArray[0] and wrapperArray[1] ?

Maybe you can make a jsFiddle or something like that. I’m really trying to help you but I’m having trouble understanding what you’re trying to achieve.

The simple example is i need to create like this:
Array name pets: [Cat,Dog,Rabbit]
Arrray food pets: [Fish,Meat,Carrot]
So the pair Cat is Fish , Dog is Meat, Rabbit is Carrot.
When i access index 0 from pets which is the pair of cats is fish, index one is the pair of dog is meat, the index two pair of rabbit is carrot.

I am looping inside array of pets to add the foods sequential which is the result must be index 0 is Fish, index 1 is Meat and index 2 is Carrot. But the actual result from my code is the items in second array is random. Can become [Meat,Carrot,Fish] after refresh the page, the second array become randoms again.

I will try using the class instead of arrays. Thanks for reply

Problem is solved when i am using class instead of double arrays. But i still don’t know why when using double array the data is not correctly pairing, and when using alert the data is pairly correctly.

I think your problem is that you’re implicitly relying on the order of for..in loops being consistent, which you can’t do. I think it makes more sense to weave the two sets of data into a single list instead of trying to walk parallel arrays, because JavaScript “arrays” are weird.