how to use ngfor to loop over a property that is an array of objects in angular

Question

New to angular, sorry if this is a silly question or I explain it improperly.

I have a component that declares an input property called satellites which accesses a Satellite class array. I need to use that property in an ngFor loop to build an HTML table. Instead of getting the information the array stores I am just getting this output

Name    Type    Operational Orbit Type  Launch Date
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

Here is the input property

<app-orbit-list [satellites]="sourceList"></app-orbit-list>

and the class it accesses

export class AppComponent {
  sourceList: Satellite[];

  constructor() {
    this.sourceList = [
       new Satellite("SiriusXM", "Communication", "2009-03-21", "LOW", true),
       new Satellite("Cat Scanner", "Imaging", "2012-01-05", "LOW", true),
       new Satellite("Weber Grill", "Space Debris", "1996-03-25", "HIGH", false),
       new Satellite("GPS 938", "Positioning", "2001-11-01", "HIGH", true),
       new Satellite("ISS", "Space Station", "1998-11-20", "LOW", true),
    ];
 }
}

and this is the ngFor loop I am trying to use in the table

   <tr *ngFor="let newRow of satellites ">{{newRow}}</tr>

any information on how to make this work or even clarification would be appreciated thank you!

<tr *ngFor="let newRow of satellites "><td>{{newRow.Name}}</td><td>{{newRow.Type}}</td> ... </tr>? — Gosha_Fighten
– Gosha_Fighten, Commented Dec 17, 2019 at 19:16

Breno Antunes · Accepted Answer · 2019-12-17 19:21:43Z

2

You are doing it almost right, your ngFor is working, but when you print the newRow you are print the whole object not the attributes.

You need to present the attributes from the object, like this:

<tr *ngFor="let newRow of satellites ">
   <td>{{newRow.name}}</td>
   <td>{{newRow.type}}</td>
   ...
</tr>

answered Dec 17, 2019 at 19:21

Breno Antunes

763 bronze badges

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

Comments

Pranav Ramachandran · Accepted Answer · 2019-12-17 19:21:38Z

1

<tr *ngFor="let newRow of sourceList">
  <td>{{newRow.Name}}</td>
</tr>

answered Dec 17, 2019 at 19:21

Pranav Ramachandran

4973 silver badges10 bronze badges

Comments

user9871690 · Accepted Answer · 2019-12-17 20:07:09Z

Review this blog, it explains creating a table with ngFor

https://medium.com/@mjthakur413/how-to-create-table-in-angular-7-using-ngfor-3c2c0875b955

You will need to use nested *ngFor like so,

<tr *ngFor = "let row of exampleAray2">
    <td *ngFor = "let column of exampleArray">
      {{row[column]}}
    </td>
  </tr>

Format your array with objects

// headings   
exampleArray = [{name: 'Name', date: 'date'}, { /*your values*/ }];
// values
exampleAray2 = ['name', 'date'];

also in your class you can declare your arrays like so,

export class AppComponent {
    // headings   
    exampleArray = [{name: 'Name', date: 'date'}, { /*your values*/ }];
    // values
    exampleAray2 = ['name', 'date'];
    constructor() {
     // or you can initialize them here
     this.exampleArray = [{name: 'Name', date: 'date'}, { /*your values*/ }];
  }
}

Collectives™ on Stack Overflow

how to use ngfor to loop over a property that is an array of objects in angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related