DEV Community

Cover image for How to loop through object properties with ngFor in angular
Sandeep Balachandran
Sandeep Balachandran

Posted on

How to loop through object properties with ngFor in angular

Hey there,

Alt text of image

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

So response was like below

Existing Structure ⚡

{ 
  "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
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

Needed Strcture ⚡

[
    { 
       "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
    }
]
Enter fullscreen mode Exit fullscreen mode

So lets divide the solution to 3 different steps.

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. Then Put the property name as a value of another key inside each objects.

Lets see that in code

// 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
    }
]
*/
Enter fullscreen mode Exit fullscreen mode

Yup. Thats it. Make use of it.

Alt text of image

Thats it for now. Hasta Pronto ! 🙌🙌

Discussion (2)

Collapse
leydar profile image
leydar • Edited on

You can use the keyvalue pipe to split the object into key/value pairs where the key is property name (skill, education, experience) and the value is the object (name, start_date...)

*ngFor="let property of object | keyvalue"
{{property.key}}: {{property.value.name}}
Enter fullscreen mode Exit fullscreen mode
Collapse
sandeepbalachandran profile image
Sandeep Balachandran Author

Very much appreciating the effort to share the information