Populate table with one array inside another array *ngFor

Question

I need a popular table to compare two products. The model of my json contains an array inside the other. In this way.

products: [
  {
    nome: 'Product Basic',
    preco: 9.90,
    categoria: 1,
    caracteristicas: [
      '1 basic',
      '2 basic',
      '3 basic',
      '4 basic',
      '5 basic',
      '6 basic]
  },
  {
    nome: 'Product Plus',
    preco: 14.90,
    categoria: 1,
    caracteristicas: [
      '1 Plus',
      '2 Plus',
      '3 Plus',
      '4 Plus',
      '5 Plus',
      '6 Plus']
  }
]

I am creating the table this way

   <tr *ngFor="let columnCaracteristica of tableComparative.columns">
        <td>{{columnCaracteristica}}</td>
        <ng-container *ngFor="let produto of tableComparative.produtos">
            <td *ngFor="let caracteristica of produto.caracteristicas">{{caracteristica}}</td>
        </ng-container>
    </tr>

Feature to be compared

columns: ['Agencia', 'Encandor', 'Roubo', 'Vale presente', 'Raios', 'Fogo'],

Result

Expected

yurzui · Accepted Answer · 2020-07-31 03:00:21Z

1

You may do that by the following template

<table *ngIf="products?.length">
  <tr *ngFor="let characteristic of products[0].caracteristicas; let i = index">
    <td>
      {{ columns[i]}}
    </td>
    <td *ngFor="let product of products">
      {{ product.caracteristicas[i] }}
    </td>
  </tr>
</table>

Ng-run Example

Moreover, you can also add top header to display product names if you want

<thead>
  <tr>
    <th></th>
    <th *ngFor="let product of products">
      {{ product.name }}
    </th>
  </tr>
</thead>

Ng-run Example

answered Jul 31, 2020 at 3:00

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Collectives™ on Stack Overflow

Populate table with one array inside another array *ngFor

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