How to populate an HTML table with JSON array values in Angular?

Question

I have an array as below:

var publicArray={
"settings": [{
"id": "1",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B1"
},
{
"title": "Comp ",
"value": "C1"
},
{
"title": " Pa Id",
"value": "P1"
}, {
"title": " NPI",
"value": "4535"
}
]
}, {
"id": "2",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B2"
},
{
"title": "Comp ",
"value": "C2"
},
{
"title": " Pa Id",
"value": "P2"
}, {
"title": " NPI",
"value": "34242"
}
]
}]
};

The array comes actually from a database, so it may extend, that means, that more rows will come as the array grows.

I need to populate an HTML table using this array as follow image.

I am new to this, please help me to do this.

yurzui · Accepted Answer · 2020-11-23 04:48:37Z

1

Having component's property called publicArray you can you can achive that by writing the following template:

<table *ngIf="publicArray?.settings?.length && publicArray.settings[0].data?.length">
  <tr>
    <th>ID</th>
    <th *ngFor="let header of publicArray.settings[0].data">{{ header.title }}</th>
  </tr>
  <tr *ngFor="let row of publicArray.settings">
    <td>{{ row.id }}</td>
    <td *ngFor="let col of row.data">
      {{ col.value }}
    </td>
  </tr>
</table>

Ng-run Example

answered Nov 23, 2020 at 4:48

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Comments

Tony · Accepted Answer · 2020-11-23 04:49:34Z

1

<table>
  <thead>
    <th>ID</th>
    <th>Business Unit</th>
    <th>Comp</th>
    <th>Pa Id</th>
    <th>NPI</th>
  </thead>
  <tbody>
    <tr *ngFor="let item of data.settings; let i=index">
      <td>{{item.id}}</td>
      <td *ngFor="let item2 of item.data">{{item2.value}}</td>
    </tr>
  </tbody>
</table>

stackblitz example

edited Nov 23, 2020 at 4:49

answered Nov 23, 2020 at 4:44

Tony

9105 silver badges19 bronze badges

Comments

tom · Accepted Answer · 2024-02-08 15:15:03Z

0

There are many libraries that you can use to create a table, like PrimeNG, Angular Material, etc.

I'll give you this example of "ngx smart table":
https://www.npmjs.com/package/ngx-smart-table.

You can follow the documentation:

By setting the settings{} object, you'll define your table header.
Then define another object from your brought data publicArray, so that it can match the same names as in the settings{}.

edited Feb 8, 2024 at 15:15

tom

411 silver badge8 bronze badges

answered Nov 23, 2020 at 4:56

hous

1141 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to populate an HTML table with JSON array values in Angular?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related