How to apply a *ngFor to an array of objects in Angular where the name varies?

Asked

Viewed 695 times

2

I have the following array called dadosRelatorio that I need to iterate in my template, that array I get through a request from my backend.

[{"id": 1,
  "name": "a",
  "class":[{
     "Inglês":[{
        "id": 1,
        "code": "teste"
     },
     {
        "id": 2,
        "code": "teste 2"
     }],
     "Espanhol":[{
        "id": 1,
        "code": "a"
     }]
   }]
}]

How can I iterate objects within class if they have different names? Occasionally it can come "Inglês", occasionally "Espanhol", among other languages.

Usually I do the *ngFor passing the name of the object, but in this case I do not know the name of the object because it varies:

<div *ngFor="let aluno of dadosRelatorio" class="div-aluno">
       <span>Aluno: {{ aluno.name }}</span>
       <div *ngFor="let classe of aluno.class">
          <div *ngFor="let idioma of classe. ???>

          </div>
       </div>
</div>
angular typescript
  • 1

    ai Voce has to map its array for their keys to be a property

2 answers

2


You can use Keyvaluepipe to read the properties of the object and make an iteration. See the example below:

Class:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dadosRelatorio = [{
    id: 1,
    name: "a",
    class: [{
      'Inglês': [{
        id: 1,
        code: "teste"
      }, {
        id: 2,
        code: "teste 2"
      }],
        Espanhol: [{
          id: 1,
          code: "a"
        }]
      }
    ]
  }];
}

Template:

<div *ngFor="let aluno of dadosRelatorio">
  <span>Aluno: {{ aluno.name }}</span>
  <div *ngFor="let classItem of aluno.class">
    <div *ngFor="let idioma of classItem | keyvalue">
      {{idioma.key}}
      <div *ngFor="let item of idioma.value">
        {{item.id}} - {{item.code}}
      </div>
    </div>
  </div>
</div>

Upshot:

Aluno: a
Espanhol
1 - a
Inglês
1 - teste
2 - teste 2

  • It worked well that way

0

You need to take the key of the object, in the Angular you can use the Object.keys. Try to do something kind of like this.

    Component({
    selector: 'app-myview',
    template: `<div *ngFor="let aluno of dadosRelatorio" class="div-aluno">
                    <span>Aluno: {{ aluno.name }}</span>
                    <div *ngFor="let classe of aluno.class">
                        <div *ngFor="let idioma of objectKeys(classe)">
                            {{idioma + ' : ' + classe[idioma]}}
                        </div>
                    </div>
                </div>`
    })

export class MyComponent {
    objectKeys = Object.keys;
    items = [
        {
            "id": 1,
            "name": "a",
            "class":[
                {
                    "Inglês":[
                        {"id": 1,"code": "teste"},
                        {"id": 2,"code": "teste 2"}
                    ],
                    "Espanhol":[
                        {"id": 1,"code": "a"}
                    ]
                }
            ]
        }
    ]
    constructor(){}
}

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.