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:
Table of Content
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
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); |
[ { 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
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); |
[ { 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
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); |
[ { 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()
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); |
[ { name: 'John' }, { age: 25 }, { city: 'New York' } ]