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:

• Using forEach() loop
• Using the map() and reduce() Methods

Approach 1: 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.

Javascript

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 } ]
]

Approach 2: 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.

Javascript

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 } ]
]

Approach 3: 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:

Javascript

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' ] }
]