Nested Ngfor Looping Over an Array of Objects

Nested NgFor looping over an array of objects

You are spelling *ngFor wrong. It's *ngFor with the capital F not *ngfor as you did in the li.So basically. change

 <li *ngfor="let day of sourceDay.days">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> {{day}}
                        </label>
                    </div>                                                        
                </li>

to

<li *ngFor="let day of sourceDay.days">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> {{day}}
                        </label>
                    </div>                                                        
                </li>

Iterate over nested object with array of children

I would avoid excess template logic that comes with nested object for-looping. It's hard to read and debug. Instead, simplify data in TS code if possible. And then manipulate it in template.

But we can make of use | keyvalue pipe to iterate over Objects with *ngFor. We then use ng-template and *ngTemplateOutlet to create recursion.

<ng-template #recursiveList let-array>
  <li *ngFor="let item of array | keyvalue">
    {{item.key}} {{item.value}}
    <ul *ngIf="item.value"> 
      <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.value }"></ng-container>
    </ul>
  </li>
</ng-template>

<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: object }"></ng-container>

Here is a working example: https://stackblitz.com/edit/angular-nested-ngfor-in-table-4nqhve?file=src%2Fapp%2Fapp.component.html

Iterate an array using its length inside a nested ngFor loop - Angular 9

not sure I understand you fully but you should just be able to do:

<div *ngFor="let c of DATA; let i = index;">
  {{i}}{{c.name}}   

  <ng-container *ngFor="let inner of c.noticias">
    <div *ngFor="let novedad of inner">
      {{novedad.name | json}}      
    </div>
  </ng-container>
</div>

ngFor your DATA array, then within each of those, ngFor over the noticias array, and then once again over the inner as it's an array of arrays.

How do I iterate through an array of objects inside an array of objects with ngFor? (angular 8 +)

If you have:

const documentHeads = [
    { 
        id: 1, 
        documents: [
            { id: 101, category: { name: 'Astrophysics' }}
        ] 
    },
    { 
        id: 2, 
        documents: [
            { id: 201, category: { name: 'Literature' }},
            { id: 202, category: { name: 'Mathematics' }} 
        ]
    }
];

And you want:

-- 1
    -- 101
-- 2
    -- 201
    -- 202

You would use:

<ol>
    <li *ngFor="let head of documentHeads">
        <p>{{ head.id }}</p>
        <ol>
            <li *ngFor="let doc of head.documents">{{ doc.id }}</li>
        </ol>
    </li>
</ol>

If you want:

-- 101
-- 201
-- 202

You would use:

<ol>
    <ng-container *ngFor="let head of documentHead">
        <li *ngFor="let doc of head.documents">{{doc.id}}</li>
    </ng-container>
</ol>

Note that you want to use ng-container in the second case because you don't want to create an HTML element between the ol and li elements.

Angular: Nested ngFor on array of objects with FormArray

I found the solution that I was looking for,Using a built in Pipe called "|keyvalue"

<div *ngFor="let form of designInputs;let d = index">
    <h5 class="card-title" *ngFor="let input of form | keyvalue">{{input.value}}</h5>
</div> 

how to loop the dynamically nested array using ngFor in angular 7

The article Playing With Recursive Ng-Template References In Angular 6.1.10 describes exactly what you need.

How to display nested array elements using NgFor in angular?

Just use <h2>{{genre}}</h2> in your html. Doing {{genre[i]}} is essentially treating the genre string as a character array and only prints out a single character of the string at index i.

angular 7 *ngFor nested array iteration

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

---

Related Topics