How to populate table data from loop contains array of object with ngfor in angular 7

Question

I have a table whose data is coming from loop contains array of object.In which Status and loc again contains array of object,here I have populated in static way for Status and loc,but how to populate those field in dynamic way.Can any one please help me,here is the code below

app.component.html

<table class="table border">
    <thead>
    <tr>
      <ng-container *ngFor="let column of columns; let i = index">
        <th>{{ column }}</th>
      </ng-container>
    </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of groups;let i = index" >
          <td>{{row.name}}</td>
          <td>{{row.items}}</td>
          <td><span>{{row.Status[0].name}}</span>,<span>{{row.Status[1].name}}</span>,<span>{{row.Status[2].name}}</span></td>
          <td><span>{{row.loc[0].name}}</span>,<span>{{row.loc[1].name}}</span></td>

      </tr>
    </tbody>
  </table>

app.component.ts

import { Component,ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
columns = ["name", "Items","status", "loc"];

  groups=[{
        "id": 1,
        "name": "pencils",
        "items": "red pencil",
        "Status": [{
            "id": 1,
            "name": "green"
        }, {
            "id": 2,
            "name": "red"
        }, {
            "id": 3,
            "name": "yellow"
        }],
        "loc": [{
            "id": 1,
            "name": "loc 1"
        }, {
            "id": 2,
            "name": "loc 2"
        }, {
            "id": 3,
            "name": "loc 3"
        }]
    },
    {
        "id": 2,
        "name": "rubbers",
        "items": "big rubber",
        "Status": [{
            "id": 1,
            "name": "green"
        }, {
            "id": 2,
            "name": "red"
        }],
        "loc": [{
            "id": 1,
            "name": "loc 2"
        }, {
            "id": 2,
            "name": "loc 3"
        }]
    },
    {
        "id": 3,
        "name": "rubbers1",
        "items": "big rubber1",
        "Status": [{
            "id": 1,
            "name": "green"
        }, {
            "id": 2,
            "name": "red"
        }],
        "loc": [{
            "id": 1,
            "name": "loc 2"
        }, {
            "id": 2,
            "name": "loc 3"
        }]
    }

];

}

Adrita Sharma · Accepted Answer · 2019-09-09 18:39:40Z

1

Try like this:

<table class="table border">
    <thead>
        <tr>
            <ng-container *ngFor="let column of columns; let i = index">
                <th>{{ column }}</th>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of groups;let i = index">
            <td>{{row.name}}</td>
            <td>{{row.items}}</td>
            <td>
                <span *ngFor="let item of row.Status;let j = index">
                    {{item.name}}
                    <span *ngIf="j != row.Status.length - 1">,</span></span>
           </td>
            <td>
                <span *ngFor="let item of row.loc;let k = index">
                   {{item.name}}
                   <span *ngIf="k != row.loc.length - 1">,</span>
                </span>     
           </td>
        </tr>
  </tbody>
</table>

See Stackbiltz Demo

edited Sep 9, 2019 at 18:39

answered Sep 9, 2019 at 18:33

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

How to populate table data from loop contains array of object with ngfor in angular 7

app.component.html

app.component.ts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.component.html

app.component.ts

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related