*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);

  }

Colocynth

Are you looking for <td>Test: {{obj.score}}</td> ? – Trill

Yes, I want to display each feedback list of scores and tone_names. Any ideas ! – Colocynth

Answer 1

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>

Daysidayspring

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

Answer 2

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] }));
}

Nacreous

Answer 3

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>

Averse

Answer 4

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.

Bioluminescence

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. – Colocynth

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. – Bioluminescence

Answer 5

<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.

Teeth