(Ionic 2/Angular Js 2) Accessing index in array inside loop of array

Question

I have problem inside array that looping inside array. This my HTML code:

<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:

import {Page, NavController} from 'ionic-angular';
import {KulinerService} from '../../providers/kuliner-service/kuliner-service';
@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 remove the alert, the kuliners is become wrong again (like random).

Edit: The items in kuliners is like this:

[{"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"}

Could you please add to the OP how each item of the kuliners array looks like? — sebaferreras
– sebaferreras, Commented Aug 25, 2016 at 16:05
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? — Stevanus W
– Stevanus W, Commented Aug 25, 2016 at 16:50
What about creating a model to allow all the properties for each object to be wrapped inside a single instance? So instead of having separated arrays, you could have an instance with the id, the name, and the kuliners of that instance only? If you want I can write an answer about how to do it. — sebaferreras
– sebaferreras, Commented Aug 25, 2016 at 17:05
Ok, you can write an answer how to do it. Thank you very much :) — Stevanus W
– Stevanus W, Commented Aug 26, 2016 at 6:04

Stevanus W · Accepted Answer · 2016-08-26 11:16:36Z

1

Thanks for sebaferreras for advice. The Problem is solved when i am create the single instance class.

 export class KulinerIndex
  {
  private jenis : Number;
  private nama : String;
  private isShow : boolean;
  private kuliners : any;

  constructor(public isiJenis : Number, public isiNama : String, public kulinerService : KulinerService)
  {
      this.setJenis(isiJenis);
      this.setNama(isiNama);
      this.setIsShow(false);
      this.loadKuliner();
  }

  loadKuliner()
  {
        this.kulinerService.loadKulinerByJenis(this.getJenis())
          .then(dataResto => {
              this.kuliners = dataResto;
        })
  }

  public getIsShow()
  {
    return this.isShow;
  }

  public setIsShow(isShow)
  {
    this.isShow = isShow
  }

  public getNama()
  {
      return this.nama;
  }

  public setNama(nama : String)
  {
      this.nama = nama
  }

  public getJenis()
  {
      return this.jenis;
  }

  public setJenis(jenis : Number)
  {
      this.jenis = jenis;
  }

  public getKuliners()
  {
      return this.kuliners;
  }

}

answered Aug 26, 2016 at 11:16

Stevanus W

1153 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sebaferreras Over a year ago

Glad to hear that... Your code si now easier to read and will also be easier to maintain in the future :)

Collectives™ on Stack Overflow

(Ionic 2/Angular Js 2) Accessing index in array inside loop of array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related