How to create an array of objects from multiple arrays in JavaScript ?
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;
}
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;
});
}
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;
}, []);
}
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) {
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;
}
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
Share your thoughts in the comments
Please Login to comment...