*ngFor - Loop two arrays in the same level

Question

I'm trying to loop two arrays by using one *ngFor but it doesn't show any element on the browser. I have sample of HTML file below also initialized arrays in component file.

HTML file:

<tbody *ngIf="feedbacks.length"> <ng-container *ngFor="let fd of feedbacks;let res of results;let i=index"> <tr> <td>{{ i }}</td> <td>{{fd}}</td> <td colspan="2"> <ul> <div *ngFor="let obj of res"> <td>Score: {{res.score}}</td> <td>Emotion: {{res.tone_name}}</td> </div> </ul> </td> </tr> </ng-container> </tbody>

Typescript file :

 results = []; feedbacks = []; ngOnInit(){ this.feedbacks = ["Le système est trop lent ", "Le top! Un exemple d'excellence.", "C'est quoi ce bordel !"]; this.results = [ [{score: 0.535632, tone_id: "anger", tone_name: "Colère"}], [{score: 0.633569, tone_id: "anger", tone_name: "Colère"}, {score: 0.506763, tone_id: "analytical", tone_name: "Analytique"}], [{score: 0.895438, tone_id: "joy", tone_name: "Joie"}] ]; console.log(this.results); }

Yes, I want to display each feedback list of scores and tone_names. Any ideas ! — Atom
– Atom, Commented Sep 21, 2018 at 10:16

Krishna Rathore · Accepted Answer · 2018-09-21 10:18:37Z

use let obj of results[i] for this.

<tbody *ngIf="feedbacks.length"> <ng-container *ngFor="let fd of feedbacks;let i=index"> <tr> <td>{{ i }}</td> <td>{{fd}}</td> <td colspan="2"> <ul> <div *ngFor="let obj of results[i]"> <td>Test: {{obj.score}}</td> </div> </ul> </td> </tr> </ng-container> </tbody>

I also agree with this answer and the one provided by @Ludevik as being the cleanest and simplest approach.

Wingnod · Accepted Answer · 2018-09-21 10:18:29Z

The ngFor structural directive only accepts a single iterable as input. It won't accept more than one array. Instead of trying to loop through two separate arrays, I would suggest creating a single array (provided both arrays are of the same length).

// HTML <tbody *ngIf="feedbacks.length"> <ng-container *ngFor="let item of combinedArray;let i=index"> <tr> <td>{{ i }}</td> <td>{{fd}}</td> <td colspan="2"> <ul> <div *ngFor="let obj of item.result"> <td>Test: {{obj.score}}</td> </div> </ul> </td> </tr> </ng-container> </tbody> // Typescript combinedArray: { feedback: any, results: any }[] = []; ngOnInit(){ ... this.feedbacks.forEach((fb, index) => this.combinedArray.push({ feedback: fb, result: this.results[index] })); }

DINESH Adhikari · Accepted Answer · 2021-03-31 11:34:16Z

try this👇

<tbody> <tr *ngFor="let fd of feedbacks;let i=index"> <td>{{ i }} </td> <td>{{fd}} {{results[i].score}}</td> <td>{{fd}} {{results[i].tone_id}}</td> <td>{{fd}} {{results[i].tone_name}}</td> </tr> </tbody>

Ludevik · Accepted Answer · 2018-09-21 10:16:00Z

You should modify your template a bit:

<tbody *ngIf="feedbacks.length"> <ng-container *ngFor="let feedback of feedbacks;let i=index"> <tr> <td>{{ i }}</td> <td>{{feedback}}</td> <td colspan="2"> <ul> <div *ngFor="let result of results[i]"> <td>Test: {{result.score}}</td> </div> </ul> </td> </tr> </ng-container> </tbody>

this assumes that the indexes in arrays correspond to each other. Another solution is to modify your model to something like this:

feedbacks = [{ value: "Le système est trop lent ", results: [{score: 0.535632, tone_id: "anger", tone_name: "Colère"}] }];

and iterate with two nested *ngFors.

Thank you @Ludevik, Could you show the typescript method that combines two arrays cause those arrays aren't static. It's just for the test.
I would not do that on the frontend side, but on the backend side, so the model makes more sense and is explicit about which results correspond to which feedback. In current solution there is a problem that both arrays have to be in correct order, so the data are not mismatched. It does not matter if you iterate it in the html, or in typescript, the problem would be still there.

Guruprasad Tupe · Accepted Answer · 2021-02-16 11:09:04Z

<ng-container *ngFor="let fd of feedbacks;index as i"> <ng-container *ngFor="let res of results;index as j> <ng-container *ngIf="i===j"> {{Here You can access fd and res of same index}} <ng-container> </ng-container> </ng-container>

Tried similar code on angular11 and it was working.

Collectives™ on Stack Overflow

*ngFor - Loop two arrays in the same level

5 Answers 5

1 Comment

Comments

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

2 Comments

Comments

Related