How to Convert an Object into Array of Objects in JavaScript ?

Converting an object into an array of objects can be done by converting the properties and values of the object into individual objects within an array. Various approaches in JavaScript can convert an object into an Array of objects. In this article, we will explore four different approaches to converting an object into an Array of objects using JavaScript.

Using Object.values() method

Object.values() method extracts the property values of an object and returns them as an array, converting the original object into an array of objects.

Syntax:

const arrayOfObjects = Object.values(obj);

Example: The below code uses the Object.values() method to convert an object into an Array of objects using JavaScript.

Javascript

const arr = {
    java: {
        id: 1,
        title: "Java Programming",
    },
    python: {
        id: 2,
        title: "Python for Beginners",
    },
};
const res = Object.values(arr);
console.log(res);

Output

[
  { id: 1, title: 'Java Programming' },
  { id: 2, title: 'Python for Beginners' }
]

Using Object.keys() method

The approach uses the Object.keys() method in JavaScript along with the map() function. Object.keys() extracts the keys of the object, and map() is then used to transform these keys into an array of corresponding objects, effectively converting the original object into an array of objects.

Syntax:

const arrayOfObjects = Object.keys(obj).map(key => obj[key]);

Example: The below code uses the Object.keys() method to convert an object into an Array of objects using JavaScript.

Javascript

const arr = {
    java: {
        id: 1,
        title: "Java Programming",
    },
    python: {
        id: 2,
        title: "Python for Beginners",
    },
};
const res = Object.keys(arr).map(
    (key) => arr[key]
);
console.log(res);

Output

[
  { id: 1, title: 'Java Programming' },
  { id: 2, title: 'Python for Beginners' }
]

Using Object.entries() method

The approach/method uses the Object.entries() method in JavaScript. It returns an array of key-value pairs from the object, and map() is then utilized to extract the values, resulting in an array of objects. This converts the original object into an array of objects.

Syntax:

const arrayOfObjects = Object.entries(obj).map(entry => entry[1]); 

Example: The below code uses the Object.entries() method to convert an object into an Array of objects using JavaScript.

Javascript

const arr = {
    java: {
        id: 1,
        title: "Java Programming",
    },
    python: {
        id: 2,
        title: "Python for Beginners",
    },
};
const res = Object.entries(arr).map(
    (entry) => entry[1]
);
console.log(res);

Output

[
  { id: 1, title: 'Java Programming' },
  { id: 2, title: 'Python for Beginners' }
]

Using for…in Loop

The for…in loop in JavaScript iterates over the keys of the object, and by checking for hasOwnProperty, it makes sure that only the object’s properties are considered. Values corresponding to each key are pushed into an array, converting the original object into an array of objects.

Syntax:

const arrayOfObjects = [];
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    arrayOfObjects.push(obj[key]);
  }
}

Example: The below code uses the for…in Loop to convert an object into an Array of objects using JavaScript.

Javascript

const arr = {
    java: {
        id: 1,
        title: "Java Programming",
    },
    python: {
        id: 2,
        title: "Python for Beginners",
    },
};
const res = [];
for (let key in arr) {
    if (arr.hasOwnProperty(key)) {
        res.push(arr[key]);
    }
}
console.log(res);

Output

[
  { id: 1, title: 'Java Programming' },
  { id: 2, title: 'Python for Beginners' }
]

Using Object.getOwnPropertyNames() method

This approach utilizes the Object.getOwnPropertyNames() method to extract all the property names of the object. Then, it maps over these property names and retrieves the corresponding values from the object, effectively converting the object into an array of objects.

Syntax:

const arrayOfObjects = Object.getOwnPropertyNames(obj).map(key => obj[key]);

Example: The following code demonstrates the usage of the Object.getOwnPropertyNames() method to convert an object into an array of objects in JavaScript.

JavaScript

const arr = {
    java: {
        id: 1,
        title: "Java Programming",
    },
    python: {
        id: 2,
        title: "Python for Beginners",
    },
};

const res = Object.getOwnPropertyNames(arr).map(
    (key) => arr[key]
);

console.log(res);

Output:

[
  { id: 1, title: 'Java Programming' },
  { id: 2, title: 'Python for Beginners' }
]