How to Loop Over Object Properties With Ngfor in Angular

How to loop over [object Object] using *ngFor

You don't need the keyvalue pipe to loop through geographicalArea because it is an array. However if you want to loop through each employee inside geographicalArea then you need keyvalue pipe because it is an object.

<tr *ngFor="let geo of geographicalArea">
  <td>{{geo.name}}</td>
  <td>{{geo.employee.name}}</td>
  <div *ngFor="let employee of geo.employee | keyvalue">
    {{ employee.key }} : {{ employee.value }}
  </div>
</tr>

How to iterate object keys using *ngFor

Angular 6.0.0

https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25

introduced a KeyValuePipe

See also https://angular.io/api/common/KeyValuePipe

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

original

You can use a pipe

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}

<div *ngFor="let key of objs | keys">

See also How to iterate object keys using *ngFor?

access key and value of object using *ngFor

As in latest release of Angular (v6.1.0) , Angular Team has added new built in pipe for the same named as keyvalue pipe to help you iterate through objects, maps, and arrays, in the common module of angular package.
For example -

<div *ngFor="let item of testObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

To keep original order, use keyvalue:onCompare,

and in component define callback:

// ...
import {KeyValue} from '@angular/common';

@Component(/* ... */)
export class MyComponent {
  private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number {
    return -1;
  }
}

Working Forked Example

check it out here for more useful information -

• https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
• https://github.com/angular/angular/commit/2b49bf7

If you are using Angular v5 or below or you want to achieve using pipe follow this answer

• access key and value of object using ngfor

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

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>

Iterate over object in Angular

It appears they do not want to support the syntax from ng1.

According to Miško Hevery (reference):

Maps have no orders in keys and hence they iteration is unpredictable.
This was supported in ng1, but we think it was a mistake and will not
be supported in NG2

The plan is to have a mapToIterable pipe

<div *ngFor"var item of map | mapToIterable">

So in order to iterate over your object you will need to use a "pipe".
Currently there is no pipe implemented that does that.

As a workaround, here is a small example that iterates over the keys:

Component:

import {Component} from 'angular2/core';

@Component({
  selector: 'component',
  templateUrl: `
       <ul>
       <li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>
       </ul>
  `
})
export class Home {
  myDict : Dictionary;
  constructor() {
    this.myDict = {'key1':'value1','key2':'value2'};
  }

  keys() : Array<string> {
    return Object.keys(this.myDict);
  }
}

interface Dictionary {
    [ index: string ]: string
}

iterate object keys using *ngFor in Angular 10

I got it, By using the safe navigation ? So it will be data.others?.name

Iterate through array of objects using *ngFor of angular

You might need two *ngFor directives. Try the following

<div class="bx--row" *ngFor="let obj of arr; let i = index;">
  <ng-container *ngFor="let item of obj | keyvalue">
    <span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
    <span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
  <ng-container>
</div>

Or you could merge the individual objects to a single object in the controller and iterate it with a single *ngFor.

Controller

const arr = [{fruit: 'banana'},{color: 'red'},{city: 'London'},{count: 10},{price: '100$'}];
const obj = Object.assign({}, ...arr)

Template

<div class="bx--row" *ngFor="let item of obj | keyvalue; let i = index;">
  <span class="bx--col-xs-5 bx--col-md-5"> {{item.key}} :</span>
  <span class="bx--col-xs-5 bx--col-md-5">{{item.value}} </span>
</div>

Iterate through Object array - *ngFor - Angular 6

Try like this:

<table border="1">
    <tr>
        <td *ngFor="let head of data.parent.tableHeading |keyvalue">
            {{head.value}}
        </td>
    </tr>
    <tr *ngFor="let item of data.parent.tableData">
        <td *ngFor="let element of item | keyvalue">
            {{element.value}}
        </td>
    </tr>
</table>

Working Demo

---

Related Topics