Odtnhj

I am trying to fill a table dynamically but can't figure out why this isn't working!

Here I get my json, where I save the array of objects in customerArray.

export class AllCustomersComponent implements OnInit 
customerArray: any;


 constructor(private http : HttpClient ) 

 ngOnInit() 
 this.http.get('http://www.mocky.io/v2/5be715ce2e00008a0016945e')
 .subscribe((data) => 
 this.customerArray = data;
 console.log(customerArray);
 
 

here I am trying to populate the table with the said array.

<table class="table">
 <thead>
 <tr>
 <th scope="col">First</th>
 <th scope="col">Last</th>
 <th scope="col">Age</th>
 <th scope="col">Edit</th>
 <th scope="col">Delete</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Mark</td>
 <td>Otto</td>
 <td>46</td>
 <td><i class="fas fa-edit"></i></td>
 <td><i class="fas fa-trash-alt"></i></td>
 </tr>
 <tr>
 <td *ngFor="let customer of customerArray">customer</td>
 </tr>
 </tbody>
 </table>

but my table just render this:

[object Object] [object Object] [object Object] [object Object] [object Object]

Your customer is an object, how should angular know what to render for it?

What you may need is something like this:

<tr *ngFor="let customer of customerArray">
 <td>customer.firstname</td>
 <td>customer.lastname</td>
 <td>customer.age</td>
 <td>customer.whatever</td>
 <td>customer.whatever</td>
</tr>