Angular2 : using *ngFor for multidimensional array using index

Question

I got this array called cats from page component: which console.log(this.cats); shows me this

and i want to bind it in (not so simple) html template which is:

<ion-grid *ngFor="let group of cats">
    <ion-row>
        <ion-col col-2></ion-col>

        <ion-col col-4 >
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-New-icon-c"></i>
                <p>{{group[0].name}}</p>

            </div>
        </ion-col>
        <ion-col col-4>
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-Tourism-icon"></i>
                <p>{{group[1].name}}</p>

            </div>
        </ion-col>
        <ion-col col-2></ion-col>
    </ion-row>
    <ion-row>
        <ion-col col-4>
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-money-icon"></i>
                <p>{{group[2].name}}</p>

            </div>
        </ion-col>
        <ion-col col-4>
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-Culture-icon"></i>
                <p>{{group[3].name}}</p>

            </div>
        </ion-col>
        <ion-col col-4>
            <div class="home-hexa" style="background-image: url(assets/img/hexa.png);">
                <i class="icomoon-Sport-icon"></i>
                <p>{{group[4].name}}</p>

            </div>
        </ion-col>
    </ion-row>
</ion-grid>

for the first {{group[0].name}} it works well but in the others it gives me error :

Cannot read property 'name' of undefined

i do this because i want to loop on every 5 values to bind them manually in ion-grid . how to solve this? sorry for bad english.

The 4th item in your array has only 1 item (the others have 5), so that error makes sense. — o4ohel
– o4ohel, Commented May 19, 2017 at 0:34
Try using two *ngFor loops rather than using hardcoded indexes. Moreover if you need the index use let i = index — Salander
– Salander, Commented May 19, 2017 at 7:14
o4ohel you are right , that's the problem the last array gives that error. so can you give me answer to how to check first if group[i] exists before using it? in html not typescript. — Mahmoud Mabrouk
– Mahmoud Mabrouk, Commented May 19, 2017 at 14:12

Salander · Accepted Answer · 2017-05-19 07:23:41Z

2

If this is your array:

cats=[[{ id:'1', image:'1', name:'g1' }, { id:'1', image:'1', name:'g1' }, { id:'1', image:'1', name:'g1' }, { id:'1', image:'1', name:'g1' }],[ { id:'1', image:'1', name:'f1' },{ id:'1', image:'1', name:'f1' },{ id:'1', image:'1', name:'f1' }] ];

Then use a nested for loop like this:

<div *ngFor="let group of cats">
  <div *ngFor="let obj of group">{{obj.name}}</div>
</div>

You can use this sort of a *ngFor loop as per your need to fetch values from a nested array.

answered May 19, 2017 at 7:23

Salander

1842 silver badges12 bronze badges

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

1 Comment

Mahmoud Mabrouk Over a year ago

as you see there is no similarity in the row. so i have to make it manually

Collectives™ on Stack Overflow

Angular2 : using *ngFor for multidimensional array using index

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