How to display array of objects in a table row

Question

Below is employee details array which have objects in it i want to display employee details in a table row:

this.employeedetails = [
{ id: 1, firstname: 'AM', lastname:'CM', age:3 },
  { id: 1, firstname: 'AM', lastname: 'DIM', age:4 },
  { id: 1, firstname: 'AM', lastname: 'FM', age:5 },
  { id: 1, firstname: 'AM', lastname: 'HM', age:6 }, ];

and this is how i am trying to print my array in html file

Possible duplicate of [How to use Angular2 templates with \*ngFor to create a table out of nested arrays?](https://stackoverflow.com/questions/35699962/how-to-use-angular2-templates-with-ngfor-to-create-a-table-out-of-nested-arrays) — Harun Yilmaz, Sep 27 '19 at 06:14

score 1 · Accepted Answer · answered Sep 27 '19 at 06:23

correct your variable names like:

this.employeeDetails = [
{ id: 1, firstName: 'AM', lastName:'CM', age:3 },
  { id: 1, firstName: 'AM', lastName: 'DIM', age:4 },
  { id: 1, firstName: 'AM', lastName: 'FM', age:5 },
  { id: 1, firstName: 'AM', lastName: 'HM', age:6 } ];

then for the table:

<table >
      <thead>
        <tr>
          <th scope="col">Id</th>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col">Age</th>      
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let employee of employeeDetails ">
          <th scope="row">{{ employee.id}}</th>
          <td>{{ employee.firstName}}</td>
          <td>{{ employee.lastName}}</td>
          <td>{{ employee.age}}</td>
        </tr>
      </tbody>
    </table>

jitender · Answer 2 · 2019-09-27T06:24:09.493

First of all your json is invalid it should be

employeeDetails = [
{ id: 1, firstName: 'AM', lastName:'CM', age:3 },
  { id: 1, firstName: 'AM', lastName: 'DIM', age:4 },
  { id: 1, firstName: 'AM', lastName: 'FM', age:5 },
  { id: 1, firstName: 'AM', lastName: 'HM', age:6 }, ];

then user *ngFor in html like

<table>
<tr>
<td>First name</td>
<td>Last name</td>
</tr>
<tr *ngFor="let item of employeeDetails">
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
</tr></table>

demo

score 0 · Answer 3 · answered Sep 27 '19 at 06:37

first of all remove the space between array name it can be employee_details You can do something like this

<table>
 <thead>
    <tr> 
      <th> First Name </th>
      <th> Lats Name </th>
      <th> Age </th>
    </tr> 
 </thead>
 <tbody> 
   <tr *ngFor= let array of employee_details> 
       <td> {{array.first}} </td>
       <td> {{array.last_name}} </td>
       <td> {{array.age}} </td>
   </tr>
 </tbody>
</table>

hope it answers your question

How to display array of objects in a table row

3 Answers3