Hey there,
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
}
}
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
}
]
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
}
]
*/
Yup. Thats it. Make use of it.
Thats it for now. Hasta Pronto ! 🙌🙌
Top comments (2)
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...)
Very much appreciating the effort to share the information