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

Here are the different methods to convert an object into an array of objects in JavaScript

1. 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.

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

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

In this example

• The Object.values(a) method extracts all the values (nested objects) from the array object as an array. Each value corresponds to the value of a key (e.g., java or python).

2. Using Object.keys() method

The Object.keys() and map() function are extracts keys and maps them to an array of objects using their corresponding values.

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

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

In this example

• object.keys(a) gets an array of keys (["java", "python"]), and map() iterates over these keys, accessing the corresponding values (a[key]).

3. Using Object.entries() method

The Object.entries() method 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.

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

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

In this example

• Object.entries(a) returns an array of key-value pairs.
• The map() function accesses the second element (entry[1]) of each pair, which is the value (the nested object).

4. 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.

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

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

In this example

• The for...in loop iterates over the keys of the array object, and hasOwnProperty() ensures only the object's own properties are accessed.

5. Using Object.getOwnPropertyNames() method

The Object.getOwnPropertyNames() method to extract all the property names of the object.

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

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

In this example

• Object.getOwnPropertyNames(a) retrieves an array of all property names (keys) of the arr object.
• The map() function then maps each key to its corresponding value (a[key]).

6. Using reduce()

Use reduce() to accumulate the results into an array of objects.

const obj = { a: 1, b: 2, c: 3 };

const res = Object.keys(obj).reduce((acc, key) => {
    acc.push({ key, value: obj[key] });
    return acc;
}, []);

console.log(res);

In this example

• Object.keys(obj) gives an array of the object's keys.
• reduce() is used to iterate over the keys and accumulate each key-value pair into an array of objects.