CODEWITHSUNDEEP
javascriptangulartypescriptecmascript-6
Jaime Rios
Jaime Rios

Reputation: 2064

How to loop over object properties with ngFor in Angular

this is post is about an interesting problem I found at work.

If you don’t know it yet. I’m talking about Angular 2+

The problem

So you want to display the markup for a list, the values for this list come from the back end and for some reason instead of a good old array of objects you receive something like this.

    { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}

Then you try to use *ngFor but a wild error message appears:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

You might fix it in the back end so you get an array of objects, but ain’t no body got time for that. Don’t you worry child, I’ve got us.

Upvotes: 100

Views: 141454

Answers (9)

Kamran Taghaddos
Kamran Taghaddos

Reputation: 614

There are 2 ways:

  1. If your object items don't have key

    { name: 'John', age: 18,... }

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

  2. If your object items have key

    Pipe

    import { Pipe, PipeTransform } from "@angular/core";

type Args = "keyvalue" | "value" | "key";

@Pipe({
    name: "pipeMapToIterable",
    pure: false
})
export class MapToIterablePipe implements PipeTransform {
    transform(obj: {}, arg: Args = "keyvalue") {
        return arg === "keyvalue" ?
            Object.keys(obj).map(key => ({ key: key, value: obj[key] })) :
            arg === "key" ?
                Object.keys(obj) :
                arg === "value" ?
                    Object.keys(obj).map(key => obj[key]) :
                    null;
    }
}

    HTML

    { 
    John: { name: 'John', age: 18 },
    Bob: { name: 'Bob', age: 25},
    Marry: { name: 'Marry', age: 22}
}

<!-- default -->
<div *ngFor="let item of myObj | pipeMapToIterable">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>


<!-- keyvalue -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'keyvalue'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>


<!-- value -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'value'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>


<!-- key -->
<div *ngFor="let item of myObj | pipeMapToIterable : 'key'">
    Key: <strong>{{item.key}}</strong> and Value: <span>{{item.value}</span>
</div>

Upvotes: 2

ilyas
ilyas

Reputation: 27

declare your array as any and then assign your object

data=[] as any;
myObj={};

data=myObj;

now loop through data array

<tr *ngFor="let item of data">
<td>{{item.property}}</td>
</tr>

Upvotes: -1

Shubham More
Shubham More

Reputation: 1

You can try this:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

For more info visit: https://angular.io/api/common/KeyValuePipe

Upvotes: -1

danday74
danday74

Reputation: 57231

In Angular 6.1 the KeyValuePipe was introduced which allows you to iterate object properties:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Docs: https://angular.io/api/common/KeyValuePipe

Upvotes: 208

Oleg
Oleg

Reputation: 619

Use Object.values to get a regular array from your object. Object.keys seems like a lot of unnecessary work.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

Upvotes: 2

ChamodyaDias
ChamodyaDias

Reputation: 627

    <div *ngFor="let item of donation_list | keyvalue">
        <div class="donation-box">
             <Label class="donation-label">Date : {{item.value.PaymentDate}}</Label>
             <Label class="donation-label">Time : {{item.value.PaymentTime}}</Label>

        </div>
   </div>

If you have more properties inside the object, you can use like this.

Upvotes: 12

Michele Federici
Michele Federici

Reputation: 1835

I don't know if this is safe, but for these simple cases i don't like the pipe solution, so i usually use:

<div *ngFor="let k of objectKeys(yourObject)">
    {{yourObject[k].color}}
</div>

and in the controller:

objectKeys(obj) {
    return Object.keys(obj);
}

This is a quite frequent case, i don't understand why there isn't a standard implementation for this like in Angular.js 1.x

Upvotes: 29

EldarGranulo
EldarGranulo

Reputation: 1615

A better solution would be to use a pipe such as this one:

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Convert Object to array of keys.
 */
@Pipe({
  name: 'appProperties'
})
export class PropertiesPipe implements PipeTransform {

  transform(value: {}): string[] {

    if (!value) {
      return [];
    }

    return Object.keys(value);
  }
}

Then in your template:

<div *ngFor="let property of response | appProperties">
    <div *ngFor="let item of response[property]">
         {{item.something}}
    </div>
</div>

Upvotes: 14

Jaime Rios
Jaime Rios

Reputation: 2064

The solution

In a perfect world, you would get an array of objects, since the world is not always, perfect. What you want to do, is to store all those objects within an array. Here is an over-simplified solution in plain old JavaScript.

Step 1. Get all the object keys. using Object.keys. This method returns an array of a given object’s own enumerable properties.

Step 2. Create an empty array. This is an where all the properties are going to live, since your new ngFor loop is going to point to this array, we gotta catch them all.

Step 3. Iterate throw all keys, and push each one into the array you created.

Here’s how that looks like in code.

// Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.push(evilResponseProps[prop]);
}

Then you can assign the goodResponse to the class property you were trying to iterare trough in the first place.

That’s all folks.

Upvotes: 0

Related Questions