Angular 5: How to display array of objects in html by *ngFor

Question

I have array of objects as below:

app.component.ts:

this.documents=[
  { employees: [ {name: "John Smith", age: 28},
                 {name: "Sarah Johnson", age: 32},
                 {name: "Mark Miller", age: 46} 
               ]
  },
  { employees: [ ] },
  { employees: [ {name: "Jimmy Colleen", age: 35},
                 {name: "Olivia Powell", age: 37}
               ] 
  },       
]

app.component.html:

         <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">Department</th>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
              </tr>
            </thead>
            <tbody *ngIf="documents.length">
              <tr *ngFor="let doc of documents; let i = index">
                <td>Department {{i + 1}}</td>
                <td>Name {{}}</td>
                <td>Age {{}}</td>
              </tr>
            </tbody>
          </table>

My question is how to display different names and their ages for each department in HTML. I've googled this issue but didn't get the suitable answer.

sdn404 · Accepted Answer · 2018-09-03 12:40:51Z

1

You didn't mention any department name in your code. I added some department names to populate data.

Example code:

app.component.ts

documents = [
    { employees: [ {name: 'John Smith', age: 28, department: 'IT'},
            {name: 'Sarah Johnson', age: 32, department: 'IT'},
            {name: 'Mark Miller', age: 46, department: 'IT'}
        ]
    },
    { employees: [ ] },
    { employees: [ {name: 'Jimmy Colleen', age: 35, department: 'ADMIN'},
            {name: 'Olivia Powell', age: 37, department: 'ADMIN'}
        ]
    },
];

app.component.html

 <table class="table table-striped">
   <thead>
     <tr>
       <th scope="col">Department</th>
       <th scope="col">Name</th>
       <th scope="col">Age</th>
     </tr>
   </thead>
   <ng-container *ngIf="documents.length">
      <tbody *ngFor="let doc of documents; let i = index">
        <tr *ngFor="let employee of doc.employees;">
          <td>{{employee.department}}</td>
          <td>{{employee.name}}</td>
          <td>{{employee.age}}</td>
        </tr>
      </tbody>
    </ng-container>
  </table>

Hope this helps !

answered Sep 3, 2018 at 12:40

sdn404

6345 silver badges7 bronze badges

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

5 Comments

Atom Over a year ago

The department is just named by index. It doesn't have property into array. Anyway, it doesn't show anything on interface :/. The table is blank.

Atom Over a year ago

Thank you, it works partially, cause I wanna display each department employees details without multiple department in different row. How could I show this?

sdn404 Over a year ago

i modified my code, check now: stackblitz.com/edit/angular-g8dmif

Atom Over a year ago

Great, thanks @sdn404. Besides, I have another array of strings I want to display next column by putting *ngFor, but apparently it cannot accept two array at the same time. Which solution is available ? Thank you for helping me this last time :)

sdn404 Over a year ago

create a new array with the data from your existing arrays and then iterate by *ngFor. That is the easiest solution i am thinking right now.

Collectives™ on Stack Overflow

Angular 5: How to display array of objects in html by *ngFor

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related