Problem

Sometimes what if you received an object of objects rather than array of objects from backend as a response, so how you will render that object of objects data using iterator of loop ?

Solution

Finally, after ES2017, it's official now! We have 3 variations to convert an Object to an Array 🎊

The array has an array of methods (sorry, bad pun 😝). So by converting the object into an array, you have access to all of that. Woohoo 🥳

ES6 - Object.keys

const numbers = {
  one: 1,
  two: 2,
};

Object.keys(numbers);
// [ 'one', 'two' ]

Object.values(numbers);
// [ 1, 2 ]

Object.entries(numbers);
// [ ['one', 1], ['two', 2] ]

Object.entries + Destructuring

const numbers = {
  one: 1,
};

const objectArray = Object.entries(numbers);

objectArray.forEach(([key, value]) => {
  console.log(key); // 'one'
  console.log(value); // 1
});