Convert object of objects to array in JavaScript

Let's say we have the following object of objects that contains rating of some Indian players, we need to convert this into an array of objects with each object having two properties namely name and rating where name holds the player name and rating holds the rating object.

Following is our sample object:

const playerRating = {
  'V Kohli': {
    batting: 99,
    fielding: 99
  },
  'R Sharma': {
    batting: 98,
    fielding: 95
  },
  'S Dhawan': {
    batting: 92,
    fielding: 90
  }
}

Using Object.keys() with forEach

The solution is straightforward using the Object.keys() method to iterate over the object keys and convert it into an array:

const playerRating = {
  'V Kohli': {
    batting: 99,
    fielding: 99
  },
  'R Sharma': {
    batting: 98,
    fielding: 95
  },
  'S Dhawan': {
    batting: 92,
    fielding: 90
  }
};

const objArray = [];
Object.keys(playerRating).forEach(key => objArray.push({
  name: key,
  rating: playerRating[key]
}));

console.log(objArray);

[
  { name: 'V Kohli', rating: { batting: 99, fielding: 99 } },
  { name: 'R Sharma', rating: { batting: 98, fielding: 95 } },
  { name: 'S Dhawan', rating: { batting: 92, fielding: 90 } }
]

Using Object.keys() with map (Cleaner Approach)

A more functional approach using map() method:

const playerRating = {
  'V Kohli': {
    batting: 99,
    fielding: 99
  },
  'R Sharma': {
    batting: 98,
    fielding: 95
  },
  'S Dhawan': {
    batting: 92,
    fielding: 90
  }
};

const objArray = Object.keys(playerRating).map(key => ({
  name: key,
  rating: playerRating[key]
}));

console.log(objArray);

[
  { name: 'V Kohli', rating: { batting: 99, fielding: 99 } },
  { name: 'R Sharma', rating: { batting: 98, fielding: 95 } },
  { name: 'S Dhawan', rating: { batting: 92, fielding: 90 } }
]

Using Object.entries() Method

Another approach using Object.entries() which returns key-value pairs:

const playerRating = {
  'V Kohli': {
    batting: 99,
    fielding: 99
  },
  'R Sharma': {
    batting: 98,
    fielding: 95
  },
  'S Dhawan': {
    batting: 92,
    fielding: 90
  }
};

const objArray = Object.entries(playerRating).map(([key, value]) => ({
  name: key,
  rating: value
}));

console.log(objArray);

[
  { name: 'V Kohli', rating: { batting: 99, fielding: 99 } },
  { name: 'R Sharma', rating: { batting: 98, fielding: 95 } },
  { name: 'S Dhawan', rating: { batting: 92, fielding: 90 } }
]

Comparison

Conclusion

The Object.keys() with map() method provides the cleanest and most readable solution. Use Object.entries() when you prefer destructuring key-value pairs for better code clarity.