Open In App

How to create an array of objects from multiple arrays in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

To create an array of objects from multiple arrays in JavaScript create loop till the array length and create required objects with each iterations.

Below are the approaches used to create an array of objects from multiple arrays in JavaScript:

Approach 1: Using a Loop

This approach uses a for loop to iterate through the keys and values arrays, creating an object for each pair and pushing it into an array. The resulting array contains objects with keys from the keys array and corresponding values from the values array.

Example: This example uses a Loop

Javascript




function createArrayOfObjectsUsingLoop(keys, values) {
    let arrayOfObjects = [];
 
    for (let i = 0; i < Math.min(keys.length, values.length); i++) {
        let obj = {};
        obj[keys[i]] = values[i];
        arrayOfObjects.push(obj);
    }
 
    return arrayOfObjects;
}
 
// Example usage:
let keysArray = ['name', 'age', 'city'];
let valuesArray = ['John', 25, 'New York'];
let resultUsingLoop = createArrayOfObjectsUsingLoop(keysArray, valuesArray);
console.log(resultUsingLoop);


Output

[ { name: 'John' }, { age: 25 }, { city: 'New York' } ]

Approach 2: Using map Function

The map function is employed to create an array of objects. For each element in the keys array, an object is created with a key-value pair, where the key is from the keys array, and the value is from the corresponding position in the values array.

Example: This example uses map Function

Javascript




function createArrayOfObjectsUsingMap(keys, values) {
    return keys.map(function (key, index) {
        let obj = {};
        obj[key] = values[index];
        return obj;
    });
}
 
// Example usage:
let keysArrayMap = ['name', 'age', 'city'];
let valuesArrayMap = ['John', 25, 'New York'];
let resultUsingMap = createArrayOfObjectsUsingMap(keysArrayMap, valuesArrayMap);
console.log(resultUsingMap);


Output

[ { name: 'John' }, { age: 25 }, { city: 'New York' } ]

Approach 3: Using reduce Function

In this approach, the reduce function is used to accumulate objects into an array. For each element in the keys array, an object is created with a key-value pair, and it is pushed into the accumulator array.

Example: This example uses reduce Function

Javascript




function createArrayOfObjectsUsingReduce(keys, values) {
    return keys.reduce(function (acc, key, index) {
        let obj = {};
        obj[key] = values[index];
        acc.push(obj);
        return acc;
    }, []);
}
 
// Example usage:
let keysArrayReduce = ['name', 'age', 'city'];
let valuesArrayReduce = ['John', 25, 'New York'];
let resultUsingReduce = createArrayOfObjectsUsingReduce(keysArrayReduce, valuesArrayReduce);
console.log(resultUsingReduce);


Output

[ { name: 'John' }, { age: 25 }, { city: 'New York' } ]

Approach 4: Using Object.fromEntries() method along with the map function

This method utilizes Object.fromEntries() along with the map function to create an array of objects. It first zips the keys and values arrays into an array of key-value pairs and then uses Object.fromEntries() to convert each pair into an object.

Example: This example uses Object.fromEntries()

Javascript




function createArrayOfObjectsUsingFromEntries(keys, values) {
    // Ensure both arrays have the same length
    const minLength = Math.min(keys.length, values.length);
 
 
    const keyValuePairs = keys.slice(0, minLength).map((key, index) => [key, values[index]]);
 
     
    const arrayOfObjects = keyValuePairs.map(pair => Object.fromEntries([pair]));
 
    return arrayOfObjects;
}
 
// Example usage:
let keysArrayFromEntries = ['name', 'age', 'city'];
let valuesArrayFromEntries = ['John', 25, 'New York'];
let resultUsingFromEntries =
    createArrayOfObjectsUsingFromEntries(keysArrayFromEntries, valuesArrayFromEntries);
console.log(resultUsingFromEntries);


Output

[ { name: 'John' }, { age: 25 }, { city: 'New York' } ]



Last Updated : 06 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads