How to Create Array of Objects From Keys & Values of Another Object in JavaScript ?

Creating an array of objects from the keys and values of another object involves transforming the key-value pairs of the original object into individual objects within an array. Each object in the array represents a key-value pair from the source object.

Below approaches can be used to accomplish this task

Using Object.keys() and reduce() methods

In this approach, we are using Object.keys() and reduce() method to create an array of objects from the keys and values of an object. It iterates over keys, pushing objects into an accumulator array with key-value pairs, resulting in the desired array.

Syntax:

Object.keys(obj);
array.reduce( function(total, currentValue, currentIndex, arr), 
initialArray)

Example: The below code uses Object.keys() and reduce() methods to create array of objects from keys and values of another object.

Javascript

const myObject = {
    key1: "HTML",
    key2: "CSS",
    key3: "JavaScript",
};
const arrayOfObjects = Object.keys(
    myObject
).reduce((acc, key) => {
    acc.push({ [key]: myObject[key] });
    return acc;
}, []);
console.log(arrayOfObjects);

Output

[ { key1: 'HTML' }, { key2: 'CSS' }, { key3: 'JavaScript' } ]

Using Array.from() and map() methods

The Array.from() method can be used with Object.entries() to convert an object's key-value pairs into an iterable array. The map() method transforms each entry into an object, creating an array of objects representing the original object's keys and values.

Syntax:

Array.from(Object.entries(obj)).map();

Example: The below code uses above-discussed methods to create an array of objects from another object.

Javascript

const myObject = {
    key1: "HTML",
    key2: "CSS",
    key3: "JavaScript",
};
const arrayOfObjects = Array.from(
    Object.entries(myObject)
).map(([key, value]) => ({ [key]: value }));
console.log(arrayOfObjects);

Output

[ { key1: 'HTML' }, { key2: 'CSS' }, { key3: 'JavaScript' } ]

Using Object.keys() and map() methods

The Object.keys() method can be used to create an array of all the keys available in the object, then the map() method can be used to iterate over them and store them into an array as objects.

Syntax:

// Object.keys()
Object.keys(obj);
//map()
map((element, index, array) => { /* … */ })

Example: The below code example illustrates the use of the Object.keys() and map() method to accomplish the task.

Javascript

const myObject = {
    key1: "HTML",
    key2: "CSS",
    key3: "JavaScript",
};
const arrayOfObjects = Object.keys(myObject).map(
    (key) => ({ [key]: myObject[key] })
);
console.log(arrayOfObjects);

Output

[ { key1: 'HTML' }, { key2: 'CSS' }, { key3: 'JavaScript' } ]

Using a for...in loop

Using a for...in loop, iterate over keys of the object. For each key, verify if it belongs to the object itself (not its prototype). If so, create an object with the key-value pair and push it into an array. This process ensures only own properties are included in the resulting array of objects.

Syntax:

for (let i in obj1) {
    // Prints all the keys in
    // obj1 on the console
    console.log(i);
}

Example: In this example we iterates myObject keys using a for...in loop, creates objects for each key-value pair, pushes them to arrayOfObjects, and logs it.

JavaScript

const myObject = {
    key1: "HTML",
    key2: "CSS",
    key3: "JavaScript",
};

const arrayOfObjects = [];

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

console.log(arrayOfObjects);

Output

[ { key1: 'HTML' }, { key2: 'CSS' }, { key3: 'JavaScript' } ]