angular 7 *ngFor nested array iteration

Question

In Angular 7, I have nested array of objects as below to iterate. 1st level iteration using *ngFor does work, but nested iteration does not show up any value. Anyone help me what has to be done? Find the below code

Sample JSON

const res = [ {
        2: [ 
            {id:1, cId: 2, name: 'TEST 1'},{id:2, cId: 2, name: 'TEST 2'}
          ],
        8: [ 
            {id: 10, cId: 8, name: 'TEST 10'}
        ]
    }]


<div *ngFor="let country of res[0] | keyvalue;">
   <span> {{country.key}} </span> <!-- Displayed 2 and 8 -->
   <div *ngFor="let airport of country[country.key]">
         <span>{{airport.name}}</span> <!-- name should be displayed, but nothing is coming up-->
   </div>
</div>

NTP · Accepted Answer · 2019-02-02 16:20:27Z

1

change your html with the following

<div *ngFor="let country of res[0] | keyvalue;">
   <span> {{country.key}} </span> <!-- Displayed 2 and 8 -->
   <div *ngFor="let airport of country.value">
         <span>{{airport.name}}</span> <!-- name should be displayed, but nothing is coming up-->
   </div>
</div>

more specifically you have to replace country[country.key] with country.value

Demo

answered Feb 2, 2019 at 16:20

NTP

4,4483 gold badges18 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

angular 7 *ngFor nested array iteration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related