Iterate two arrays in *ngFor-- IONIC2/Angular2

Question

I have stored values in two arrays to iterate in a single ion-list . Billerstatusstate and Billerstatusnamelst are the two arrays.

I have tried the following to iterate

<ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

and

<ion-list ion-item *ngFor="let stat of Billerstatusstate" *ngFor="let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

Its taking first iterated value for both local variable.

Is there something am i missing ??

is there anyother way to store both values in single array and split it in View side using ngFor..

score 9 · Answer 1 · answered Jun 29 '16 at 13:34

9

I could create a pipe to "merge" your two arrays into a single one and then you can iterate over this new array.

Here is a sample:

@Pipe({
  name: 'merge'
})
export class MergePipe {
  transform(arr1, arr2) {
    var arr = [];
    arr1.forEach((elt, i) => {
      arr.push({ state: elt, name: arr2[i] });
    });
  }
}

And use it this way:

<ion-list ion-item *ngFor="let elt of Billerstatusstate | merge:Billerstatusnamelst"  >
  {{elt.name}} <button round>{{elt.state}}</button>
</ion-list>

answered Jun 29 '16 at 13:34

Thierry Templier

198,364
44
396
360

I didnt yet try ur answer. I,m trying to save two values in array in form of Object .so that i can access based on obj.name,obj.status. – Kartiikeya Jun 29 '16 at 13:54
I will try your approach as it seems to be useful in typical scenarios. @tThierry – Kartiikeya Jun 29 '16 at 14:05
using this approach will the template be automatically updated if one of the array changes? – filippo Mar 03 '17 at 17:16
This IMO should be the accepted answer, and it seems to me the most "angular" way to do it. – don Sep 29 '18 at 16:22

score 7 · Answer 2 · answered Jun 29 '16 at 13:28

7

You can leverage the index of the ngFor directive to achieve this.

<ion-list ion-item *ngFor="let stat of Billerstatusstate; let i=index">

  {{Billerstatusnamelst[i]}} <button round>{{stat}}</button>

</ion-list>

answered Jun 29 '16 at 13:28

Maximilian Riegler

22,720
4
62
71

Instead of index, i have to iterate another array. – Kartiikeya Jun 29 '16 at 13:29
Does the other array have the same count as the first? And are those arrays related? – Maximilian Riegler Jun 29 '16 at 13:30
Both arrays have names/status msgs ..Not related to index/numbers. – Kartiikeya Jun 29 '16 at 13:31
8

If they're not related, why on earth do you want to display data from both arrays side by side? – Maximilian Riegler Jun 29 '16 at 13:32
consider its related.. how to split "karthik" + "ONLINE" value to two different html elements – Kartiikeya Jun 29 '16 at 13:35
Well, I don't see any problem. This should work as it is. – Maximilian Riegler Jun 29 '16 at 13:36
1

Not sure what you are trying to accomplish here. You want to show the status of a biller and their name, and the data comes from two different sources? You would need to come up with an array of {name: name,status:status} and iterate through them. – Derek Kite Jun 29 '16 at 13:41

sebaferreras · Answer 3 · 2017-05-19T14:02:28.343

Why instead of doing this

<ion-list ion-item *ngFor="let stat of Billerstatusstate;let bil of Billerstatusnamelst "  >

  {{bil}} <button round>{{stat}}</button>

</ion-list>

don't you create a single array in your code:

// I'm assuming they both have the same size
for (var _i = 0; _i < Billerstatusstate.length; _i++) {
    this.singleArray.push({
                         stat: this.Billerstatusstate[_i],
                         bil: this.Billerstatusnamelst[_i] 
                        });
}

And then in your page:

<ion-list ion-item *ngFor="let item of singleArray;"  >

  {{item.bil}} <button round>{{item.stat}}</button>

</ion-list>

score 1 · Accepted Answer · answered Jun 29 '16 at 13:58

I have followed this approach.. I have stored values in single array instead of two arrays as it comes from a single source.

 this.Billerstatusnamelst.push({name:"testname",Status:"Failure"});

In HTML part

 <ion-list ion-item *ngFor="let bil of Billerstatusnamelst "  >

  {{bil.name}} <button round>{{bil.Status}}</button>

</ion-list>

Its worked for me..

score 0 · Answer 5 · answered Jul 20 '18 at 07:34

Multiple array in single array am using

    this.termlist = this.result.termlst.$values;
    this.disableterm = this.result.disableterms.$values;
    this.customlist = this.result.customgrplist.$values;

single array code

 this.totalarrayob =[ this.termlist,this.disableterm, this.customlist];

how can i call in html using *ngfor

<ion-col col-12 no-padding *ngFor="let list of totalarrayob;let k = index">
    <h6>lorem Ipsum</h6>
    <ion-list>
      <ion-item>
        <ion-label>I Term</ion-label>
        <ion-checkbox checked="false"></ion-checkbox>
        <ion-note item-right>
          25000
        </ion-note>
      </ion-item>
    </ion-list>
  </ion-col>

Iterate two arrays in *ngFor-- IONIC2/Angular2

5 Answers5

Linked