How to pass array in another array of objects?
In this article, we will try to understand how to pass an array in another array of objects in JavaScript with the help of specific examples.
Pre-requisite: Array of Objects in JavaScript
Example:
Input:
[
[
[100, 100, 100],
[100, 100, 98, 50],
[100, 100, 100, 20],
],
[
[100, 100, 100, 99],
[100, 100, 100, 100],
],
]
Output:
[
[{ total: 300 }, { total: 348 }, { total: 320 }],
[{ total: 399 }, { total: 400 }]
]
Below are the approaches to pass an array in another array of objects:
Table of Content
- Using forEach() loop
- Using the map() and reduce() Methods
- Using Spread Operator
- Using a loop
Using forEach() loop
- Create a temporary array result variable.
- Traverse array using forEach() loop and inside it create another temporary array for storing values and thus using that inner values calculate some for each corresponding rows and then add them as another object.
- Display that array of object as an output.
Example: Here we first need to traverse over Arrays of Arrays and then for each array’s values we need to calculate a sum for each array’s corresponding rows.
let numbers_array = [
[
[100, 100, 100],
[100, 100, 98, 50],
[100, 100, 100, 20],
],
[
[100, 100, 100, 99],
[100, 100, 100, 100],
],
];
let desired_output = (numbers_array) => {
let result = [];
numbers_array.forEach((element) => {
let sumCalc = [];
element.forEach((item) => {
let sum = 0;
item.map((value) => {
sum += value;
});
sumCalc.push({ total: sum });
});
result.push(sumCalc);
});
return result;
};
console.log(desired_output(numbers_array));
Output
[
[ { total: 300 }, { total: 348 }, { total: 320 } ],
[ { total: 399 }, { total: 400 } ]
]
Using the map() and reduce() Methods
- In this approach, we will use the map() method which is used in order to traverse over the main array.
- Thereafter reduce() method is used in order to reduce the value as a sum for the output itself.
- Then we will push the sum or total value in as key-value pair in the object and later we will return the object.
Example: Below is the implementation of the above approach.
let numbers_array = [
[
[100, 100, 100],
[100, 100, 98, 50],
[100, 100, 100, 20],
],
[
[100, 100, 100, 99],
[100, 100, 100, 100],
],
];
let desired_output = (numbers_array) => {
let data = numbers_array.map((item) =>
item.map((row) => {
let total_value = row.reduce(
(previous_value, current_value) =>
previous_value + current_value,
0
);
return { total: total_value };
})
);
return data;
};
console.log(desired_output(numbers_array));
Output
[
[ { total: 300 }, { total: 348 }, { total: 320 } ],
[ { total: 399 }, { total: 400 } ]
]
Using Spread Operator
The Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 value is expected. It allows us the privilege to obtain a list of parameters from an array.
Example:
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const newArray = [
{ id: 1, name: 'Object 1', values: [...arr1] },
{ id: 2, name: 'Object 2', values: [...arr2] }
];
console.log(newArray);
Output
[
{ id: 1, name: 'Object 1', values: [ 1, 2, 3 ] },
{ id: 2, name: 'Object 2', values: [ 'a', 'b', 'c' ] }
]
Using a loop
Using a loop to pass an array into an array of objects involves iterating through a range and pushing objects into the array. Each object contains the original array (spread operator used to create a copy) as one of its properties.
Example:
let originalArray = [1, 2, 3];
let objectsArray = [];
for (let i = 1; i <= 2; i++) {
objectsArray.push({ id: i, values: [...originalArray] });
}
console.log(objectsArray);
Output
[ { id: 1, values: [ 1, 2, 3 ] }, { id: 2, values: [ 1, 2, 3 ] } ]