How to loop through object properties with ngFor in angular
Tags: javascript, angular, humour, beginners
Published: 2020-06-28 14:12:36

---
title: How to loop through object properties with ngFor in angular
published: true
description: Solution to loop objects
tags: javascript, angular, humour, beginners
series: Angular Journey
---

Hey there,

![Alt text of image](https://media.giphy.com/media/YOjP742CyBbg0zKCbl/giphy.gif)

Recently I had to loop through an object. The backend guy was giving a object of objects [ Not array of objects] .:scream: 🤔 I had to loop through anyway for the sake of front end. :disappointed_relieved: 


So response was like below
<h2>Existing Structure :zap:</h2> 	

```js
{ 
  "skill" : 
    { 
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    },
   "education": 
    { 
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    },
   "experience": 
    { 
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    }
}
```

But when you use ng for to loop through the object you will get a strange error like below one :facepunch:

<blockquote>Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.</blockquote> :flushed: :flushed: :flushed:

Remember its not like the strcture you wanted , You are probably expecting something like the below one. Well in my case I was expecting like the below strcture

<h2>Needed Strcture :zap:</h2> 
```js
[
    { 
       "name" :"skill"
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    }, 
    { 
       "name" :"education"
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    },
    { 
       "name" :"experience"
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    }
]
```
So lets divide the solution to 3 different steps.

Step 1 :white_check_mark:
Get all the object keys. using <code>Object.keys</code>. This method returns an array of a given object’s own enumerable properties.

Step 2 :white_check_mark:
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 :white_check_mark:
Iterate throw all keys, and push each one into the array you created. Then Put the property name as a value of another key inside each objects.

Lets see that in code

```js
// Spagetti strcture in a variable. Here are all my criterias.
let spaghettiResponse= { 
  "skill" : 
    { 
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    },
   "education": 
    { 
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    },
   "experience": 
    { 
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    }
}

// Step 1. Get all the object keys.
let spaghettiProperties = Object.keys(spaghettiResponse);

// Step 2. Create an empty array.
neededArray = [];

// Step 3. Iterate throw all keys.
let i = 0;
for (prop of spaghettiProperties ) { 
    this.neededArray.push(spaghettiResponse[prop]);
    this.neededArray[i].['name'] = prop;
    i++;
}
console.log(this.neededArray)

/*
[
    { 
       "name" :"skill"
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    }, 
    { 
       "name" :"education"
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    },
    { 
       "name" :"experience"
       "start_date" : "10/10/2001",
       "end_date" : "10/10/20015",
       "code":1
    }
]
*/
```
Yup. Thats it. Make use of it.

![Alt text of image](https://media.giphy.com/media/XBRFAzaelJo0jaOsvR/giphy.gif)


Thats it for now. Hasta Pronto ! :raised_hands::raised_hands: