Create an array of objects from multiple arrays in JavaScript

In this tutorial, I will show how you can create an array of objects from multiple arrays. An array of objects basically means an array that contains one or more than one object.

JavaScript code to create an array of objects from arrays

For this purpose, I will use map() method that is used to create a new array from an existing array by calling a function on each array element. This function can be used to manipulate the values of each element and return a new array.  The original array remains unchanged in this method.

Here is the JavaScript code below to create an array of objects from multiple arrays.

const sl_no = [1, 2, 3];
const actor_name = ["Ryan Reynolds", "Jake Gyllenhaal", "Robert Downey Jr"];
const movie_name = ["Red Notice", "Nightcrawler", "Endgame"];
const release_date = [2021, 2014, 2019];

const arrayOfObjects = sl_no.map((currentValue, index) => {
  return{
    sl_no: currentValue,
    actor_name: actor_name[index],
    movie_name: movie_name[index],
    release_date: release_date[index]
  }
})

console.log(arrayOfObjects);

In the above program, the currentValue is a required parameter that contains the value of the current element.

The index parameter is an optional parameter that contains the index of the current element.

Output:

[
{
sl_no: 1,
actor_name: 'Ryan Reynolds',
movie_name: 'Red Notice',
release_date: 2021
},
{
sl_no: 2,
actor_name: 'Jake Gyllenhaal',
movie_name: 'Nightcrawler',
release_date: 2014
},
{
sl_no: 3,
actor_name: 'Robert Downey Jr',
movie_name: 'Endgame',
release_date: 2019
}
]

As you can see in the output, I have created a new array that contains multiple objects from multiple arrays.

Here’s another example. Have a look at it.

To create an array of objects from multiple arrays in JavaScript, you can use the map() method combined with the Object.assign() method to create a new object for each element in the original arrays.

// Define the original arrays
const names = ['John', 'Jane', 'Jack', 'Jill'];
const ages = [25, 30, 28, 27];

// Use the map() method to create a new array of objects
const people = names.map((name, index) => {
  // Use the Object.assign() method to create a new object
  // with the properties from the original arrays
  return Object.assign({}, {
    name,
    age: ages[index]
  });
});

// Output the resulting array of objects
console.log(people);

In this example, the map() method is used to iterate over the names array, and for each element in the array, a new object is created using the Object.assign() method. The object is created by combining the current name from the names array with the corresponding age from the ages array. The resulting array of objects is output to the console.

Output:

[
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Jack', age: 28 },
{ name: 'Jill', age: 27 }
]

By using for loop

We can also create an array of objects from multiple arrays by using for loop.

Here is the code below.

const sl_no = [1, 2, 3];
const actor_name = ["Ryan Reynolds", "Jake Gyllenhaal", "Robert Downey Jr"];
const movie_name = ["Red Notice", "Nightcrawler", "Endgame"];
const release_date = [2021, 2014, 2019];


for(let i = 0 ; i < sl_no.length; i++){
  const newArray = {
    sl_no: sl_no[i],
    actor_name: actor_name[i],
    movie_name: movie_name[i],
    release_date: release_date[i]
  }
  console.log(newArray);
}

In the above program, The length property is used to get the length or number of elements of an array.

And i represents the index here.

Output

{
sl_no: 1,
actor_name: 'Ryan Reynolds',
movie_name: 'Red Notice',
release_date: 2021
}
{
sl_no: 2,
actor_name: 'Jake Gyllenhaal',
movie_name: 'Nightcrawler',
release_date: 2014
}
{
sl_no: 3,
actor_name: 'Robert Downey Jr',
movie_name: 'Endgame',
release_date: 2019
}

Leave a Reply

Your email address will not be published. Required fields are marked *