loading...
Cover image for How to loop through object properties with ngFor in angular

How to loop through object properties with ngFor in angular

sandeepbalachandran profile image Sandeep Balachandran ・2 min read

Angular Journey (5 Part Series)

1) Generate QR code with Share / Download Feature ( Angular 8) 2) How to filter the data with a common search bar at the top (Angular 8) 3) Angular 9 New Features (Finally IVY is here) 4) Angular 10 Now Available 5) 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
    }
}

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.

Alt text of image

Thats it for now. Hasta Pronto ! πŸ™ŒπŸ™Œ

Angular Journey (5 Part Series)

1) Generate QR code with Share / Download Feature ( Angular 8) 2) How to filter the data with a common search bar at the top (Angular 8) 3) Angular 9 New Features (Finally IVY is here) 4) Angular 10 Now Available 5) How to loop through object properties with ngFor in angular

Posted on Jun 27 by:

sandeepbalachandran profile

Sandeep Balachandran

@sandeepbalachandran

Very much interested in working with a space exploration team. Well I couldnt get anywhere with my "ET" love. interested in human body anatomy. Again not a doctor. Currently fullstack dev

Discussion

markdown guide