Iterate over object in Angular

typescript iterate over object
how to iterate json object in angular 6
angular 6 iterate over object in typescript
angular loop through array of objects
angular 4 iterate over object typescript
angular 4 iterate over map
loop through json object angular 6
angular iterate over object object

I am trying to do some things in Angular 2 Alpha 28, and am having an issue with dictionaries and NgFor.

I have an interface in TypeScript looking like this:

interface Dictionary {
    [ index: string ]: string
}

In JavaScript this will translate to an object that with data might look like this:

myDict={'key1':'value1','key2':'value2'}

I want to iterate over this and tried this:

<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>

But to no avail, none of the below worked either:

<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>

In all cases I get errors like "Unexpected token" or "Cannot find 'iterableDiff' pipe supporting object"

What am I missing here? Is this not possible anymore? (The first syntax works in Angular 1.x) or is the syntax different for iterating over an object?

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
}

Looping over object properties with ngFor in Angular, If you don't know it yet. I'm talking about Angular 2+. FYI: Here is a post about why it is just Angular. So you want to display the markup for a list,� Angular now has a type of iterate Object for exactly this scenario, called a Set. It fit my needs when I found this question searching. You create the set, "add" to it like you'd "push" to an array, and drop it in an ngFor just like an array. No pipes or anything.

Angular 6.1.0+ Answer

Use the built-in keyvalue-pipe like this:

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

or like this:

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

where mySortingFunction is in your .ts file, for example:

mySortingFunction = (a, b) => {
  return a.key > b.key ? -1 : 1;
}

Stackblitz: https://stackblitz.com/edit/angular-iterate-key-value

You won't need to register this in any module, since Angular pipes work out of the box in any template.

It also works for Javascript-Maps.

How to Iterate Easily Over Object Properties in JavaScript, Object.values() and Object.entries() are another improvement step for JavaScript developers to have helper functions that iterate over object� How can I iterate through this project in my component Tempate? I tried: <ion-item *ngFor="let pro of products"> {{ pro.color }} </ion-item> In a project that I use Angular 8, keyValue pipeline worked. What can I do here? I am using “target”: “es2015”. Source: New feed Source Url Iterate through object key in Angular 5

try to use this pipe

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

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

<div *ngFor="#value of object | values"> </div>

Loop Object Key Values In Angular Using *NgFor & Angular , KeyValue pipe released in Angular 6.1 to loop through objects,Maps and arrays. Now by passing KeyValue pipe to *ngFor we can loop through� 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.

In addition to @obscur's answer, here is an example of how you can access both the key and value from the @View.

Pipe:

@Pipe({
   name: 'keyValueFilter'
})

export class keyValueFilterPipe {
    transform(value: any, args: any[] = null): any {

        return Object.keys(value).map(function(key) {
            let pair = {};
            let k = 'key';
            let v = 'value'


            pair[k] = key;
            pair[v] = value[key];

            return pair;
        });
    }

}

View:

<li *ngFor="let u of myObject | 
keyValueFilter">First Name: {{u.key}} <br> Last Name: {{u.value}}</li>

So if the object were to look like:

myObject = {
    Daario: Naharis,
    Victarion: Greyjoy,
    Quentyn: Ball
}

The generated outcome would be:

First name: Daario Last Name: Naharis

First name: Victarion Last Name: Greyjoy

First name: Quentyn Last Name: Ball

angular.forEach, obj, ObjectArray. Object to iterate over. iterator, Function. Iterator function. context. (optional). Object. Object to become context ( this ) for the iterator function. KeyValue pipe released in Angular 6.1 to loop through objects,Maps and arrays.Now by passing KeyValue pipe to *ngFor we can loop through objects key values & maps. Prior to this Angular 6.1 release we cannot iterate directly through objects key values & maps using *ngFor directive. To tackle this issue Angular keyvalue pipe has been introduced.

Updated : Angular is now providing the pipe for lopping through the json Object via keyvalue :

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

WORKING DEMO , and for more detail Read


Previously (For Older Version) : Till now the best / shortest answer I found is ( Without any Pipe Filter or Custom function from Component Side )

Component side :

objectKeys = Object.keys;

Template side :

<div *ngFor='let key of objectKeys(jsonObj)'>
   Key: {{key}}

    <div *ngFor='let obj of jsonObj[key]'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

WORKING DEMO

ngRepeat, Iterating over object properties. It is possible to get ngRepeat to iterate over the properties of an object using the following syntax: <div ng-repeat="(key, value) in � @MikeHarrison ng-repeat is essentially iterating over the object and returning key-value pairs. Think of it like for(var value in arrayOfValues) { }. If you re-assign the variable value inside your loop, you are not changing what is inside of arrayOfValues, you are just re-pointing value to a new object. – Jon Senchyna Apr 12 '18 at 17:26

For Of • Angular, The for–in loop is for looping over object properties. The for–of loop is for looping over the values in an array. for–of is not just for arrays. It also works on most� angular iterate over json. Ask Question Asked 6 years, 7 months ago. Active 6 years, Pushing objects in to an array no working on modal angular js. 10.

AngularJS, The angular. forEach() Function in AngularJS is used to iterate through each item in an array or object. It works similar to the for loop and this loop contains all properties of an object in key-value pairs of an object. I am new to Angular2 and I am trying to loop through a JSON object that I am getting back from a GET request but can't work it out. My JSON object: { Results: [{ Time: "2017-02-11T08

KeyValuePipe, This examples show how an Object or a Map can be iterated by ngFor with the use of this keyvalue pipe. _.forIn () iterates over own and inherited enumerable properties of an object, while _.forOwn () iterates only over own properties of an object (basically checking against hasOwnProperty function). For simple objects and object literals any of these methods will work fine.

Comments
  • What is a "dictionary"? I've never seen or heard that term in a JavaScript, Angular, or TypeScript context. Y
  • Dictionary means a map I think, the term is not used at all in JS context but in Python or Ruby it does used.
  • I think @bersling answer is now the correct answer to this question.
  • Please mark the correct answer better. bersling is correct
  • i am trying same on object with key as number and value as string but angular is throwing error expression has changed after it was checked ? why so any idea ?
  • Yeah this is happening for me too. And same if I use @obsur's solution too.
  • Please see bersling's answer because there is a trivial solution on the latest angular 7
  • You should add implements PipeTransform in the class definition (see angular.io/guide/pipes#custom-pipes)
  • @toioski thanks, i've added it and updated to the new syntax of the for loop.
  • Great answer, used this to ngFor my Dictionary. I had to do keyValuePair.val[0] though as my values ended up [{}] and not {}
  • Is there an advantage to this over just return Object.keys(dict).map(key => ({key, val: dict[key]}))?
  • I don't see any, actually I'd use your way!
  • Brilliant, and if I want to keep the reference to the key I will just map an object with both key and value instead. I wish I could mark several answers as accepted answer, since this is the solution to my problem whilst the marked answer is the answer to my question.