Nrthugu

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>