How to Convert Object to Array of Objects in JavaScript

by

To convert an Object to Array of Objects in JavaScript, use the Object.values() function. The Object.values() is a built-in JavaScript function that returns an array of a given object’s own enumerable property values.

const person = {
   person1: {
       name: "tarak",
       age: 34,
       professional: "coder"
   },
   person2: {
       name: "nidhi",
       age: 21,
       profession: "student"
   },
   person3: {
       name: "krupa",
       age: 34,
       profession: "businessman"
    }
}

const array = Object.values(person);
console.log(array)

Output

[
   { name: 'tarak', age: 34, professional: 'coder' },
   { name: 'nidhi', age: 21, profession: 'student' },
   { name: 'krupa', age: 34, profession: 'businessman' }
]

In the above example, we have data like person1, person2, and person3, but this isn’t very pleasant since we don’t want to write every time person1, person2, and person3. So, instead of this, we can convert them to arrays and easily get value by iterating them.

Convert complex Object into an Array

To convert a complex object into an array of objects in JavaScript, use the Object.keys() function. The Object.keys() is a built-in method that returns an array of a given object’s own enumerable property names.

const employeeData = {
  'Paresh Sharma': {
    language: "javascript",
    exp: "2+ year",
    jobType: "work from home"
  },
  'Sonu Dangar': {
    language: "Python",
    exp: "intern",
    jobType: "work from office"
 },
 'Nilesh Mayani': {
    language: "Java",
    exp: "5+ year",
    jobType: "work from home"
 },
}
const array = [];
Object.keys(employeeData).forEach((key) => {
     array.push({
     name: key,
     about: employeeData[key]
   })
});

console.log(array);

Output

[
   {
      name: 'Paresh Sharma',
      about: {
        language: 'javascript',
        exp: '2+ year',
        jobType: 'work from home'
   }
   },
   {
       name: 'Sonu Dangar',
       about: { language: 'Python', exp: 'intern', jobType: 'work from office' }
   },
   {
       name: 'Nilesh Mayani',
       about: { language: 'Java', exp: '5+ year', jobType: 'work from home' }
   }
]

In the above example, we can keep object keys in the array. The Object.keys() method is useful if we want to convert an object into an array of objects and the object keys.

Object.keys() and Object.Values()

The Object.keys() is a built-in JavaScript method that will return the key of the objects and the Object.values() method is a built-in method that returns the values of the objects.

Example

const person = {
   name: "Tony Stark",
   age: 40,
   gender: "male",
   character: "Iron man"
}

console.log("Object keys : ", Object.keys(person));
console.log("Object values : ", Object.values(person));

Output

Object keys : [ 'name', 'age', 'gender', 'character' ]
Object values : [ 'Tony Stark', 40, 'male', 'Iron man' ]

JavaScript Object.entries()

The Object.entries() is a built-in method that returns an array of a given object’s own enumerable string-keyed property pairs.

const person = {
 name: "Tony Stark",
 age: 40,
 gender: "male",
 character: "Iron man"
}

console.log("Object Entries : ", Object.entries(person))

Output

Object Entries : [
   [ 'name', 'Tony Stark' ],
   [ 'age', 40 ],
   [ 'gender', 'male' ],
   [ 'character', 'Iron man' ]
]

That’s it for the convert Object to Array of Objects tutorial.

See also

How to Convert Set to Array in JavaScript

How to Add Property to Array of Objects in JavaScript

How to Map Array Elements in JavaScript

Leave a Comment