Calculate the sum of arrays within an array (matrix) by adding the elements

Question

Calculate the sum of arrays within an array (matrix) by adding the elements

What is the best way to calculate the vertical sum of data in an array of arrays?

arrayOfArrays = [{
    label: 'First Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Second Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Third Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  }
];

var result = arrayOfArrays.reduce(function(accumulatedArray, currentArray) {
  return accumulatedArray.data.map(function(value, index) {
    return value + currentArray.data[index];
  }, 0);
});

console.log(result)

The expected output is the vertical sum of arrays. [3,6,9,12,15,18,21,24]

An issue has been identified where array1 always returns as undefined.

javascript arrays matrix sum

Answer 1

Answer №1

Your code is almost correct but has one issue.

You are looping through the accumulator, which will result in an array of numbers in the second iteration. Instead, loop over array2 or the current item.

The purpose of using .reduce is to maintain the same structure for all iterations. If you do not provide a default value for the accumulator, the first iteration will be of type

Array<{ label: string, data: Array<number>}>

and the second iteration will just be Array<number>. To avoid this inconsistency, pass an empty array as the default value. This way, the calculation won't break when accessing array[n], as it will default to 0.

Therefore, your calculation should be:

value + (array1[index] || 0)

Here's a sample code snippet:

arrayOfArrays = [{
    label: 'First Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Second Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Third Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  }
];

var result = arrayOfArrays.reduce(function(array1, array2) {
  return array2.data.map(function(value, index) {
    return value + (array1[index] || 0);
  }, 0);
}, []);

console.log(result)

Answer 2

Your code is almost correct but has one issue.

You are looping through the accumulator, which will result in an array of numbers in the second iteration. Instead, loop over array2 or the current item.

The purpose of using .reduce is to maintain the same structure for all iterations. If you do not provide a default value for the accumulator, the first iteration will be of type

Array<{ label: string, data: Array<number>}>

and the second iteration will just be Array<number>. To avoid this inconsistency, pass an empty array as the default value. This way, the calculation won't break when accessing array[n], as it will default to 0.

Therefore, your calculation should be:

value + (array1[index] || 0)

Here's a sample code snippet:

arrayOfArrays = [{
    label: 'First Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Second Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Third Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  }
];

var result = arrayOfArrays.reduce(function(array1, array2) {
  return array2.data.map(function(value, index) {
    return value + (array1[index] || 0);
  }, 0);
}, []);

console.log(result)

Answer 3

Answer №2

To utilize the index/key within the context of a map, simply incorporate it into the previous value.

const arrayData = [{name:'First Item', values:[1,2,3,4,5,6,7,8]},{name:'Second Item', values:[1,2,3,4,5,6,7,8]},{name:'Third Item', values:[1,2,3,4,5,6,7,8]}];
const result = arrayData.reduce((accumulator, current) => (current.values.map((item, key) => {accumulator[key] = accumulator[key] ? accumulator[key] += item : item}), accumulator), [])
console.log(result)

Answer 4

To utilize the index/key within the context of a map, simply incorporate it into the previous value.

const arrayData = [{name:'First Item', values:[1,2,3,4,5,6,7,8]},{name:'Second Item', values:[1,2,3,4,5,6,7,8]},{name:'Third Item', values:[1,2,3,4,5,6,7,8]}];
const result = arrayData.reduce((accumulator, current) => (current.values.map((item, key) => {accumulator[key] = accumulator[key] ? accumulator[key] += item : item}), accumulator), [])
console.log(result)

Answer 5

Answer №3

It appears you may have misunderstood how to use the reduce function. Here's an alternative solution using a for loop:

arrayOfArrays = [{
label:'First Value', data:[1,2,3,4,5,6,7,8]},
{label:'Second Value', data:[1,2,3,4,5,6,7,8]},
{label:'Third Value', data:[1,2,3,4,5,6,7,8]}
];
const newArr = [];

for(let x = 0; x < arrayOfArrays[0].length; x++){
newArr.push(arrayOfArrays[0].data[x]+arrayOfArrays[1].data[x]+arrayOfArrays[2].data[x])
}
console.log(newArr); // output new array

Answer 6

It appears you may have misunderstood how to use the reduce function. Here's an alternative solution using a for loop:

arrayOfArrays = [{
label:'First Value', data:[1,2,3,4,5,6,7,8]},
{label:'Second Value', data:[1,2,3,4,5,6,7,8]},
{label:'Third Value', data:[1,2,3,4,5,6,7,8]}
];
const newArr = [];

for(let x = 0; x < arrayOfArrays[0].length; x++){
newArr.push(arrayOfArrays[0].data[x]+arrayOfArrays[1].data[x]+arrayOfArrays[2].data[x])
}
console.log(newArr); // output new array

Answer 7

Answer №4

To simplify arrays, you can iterate through the array of objects and add the data property to a new array. Then, utilize reduce/map methods on the flattened data:

arrayOfArrays = [
  {label:'First Value', data:[1,2,3,4,5,6,7,8]},
  {label:'Second Value', data:[1,2,3,4,5,6,7,8]},
  {label:'Third Value', data:[1,2,3,4,5,6,7,8]}
];

var data = [];

arrayOfArrays.forEach((item)=> {
    data.push(item.data)
})

var sum = (result, arr) => result.map((val, index) => arr[index] + val);
var output = data.reduce(sum);

console.log(output);

This will produce the following output:

[3, 6, 9, 12, 15, 18, 21, 24]

View working example

Answer 8

To simplify arrays, you can iterate through the array of objects and add the data property to a new array. Then, utilize reduce/map methods on the flattened data:

arrayOfArrays = [
  {label:'First Value', data:[1,2,3,4,5,6,7,8]},
  {label:'Second Value', data:[1,2,3,4,5,6,7,8]},
  {label:'Third Value', data:[1,2,3,4,5,6,7,8]}
];

var data = [];

arrayOfArrays.forEach((item)=> {
    data.push(item.data)
})

var sum = (result, arr) => result.map((val, index) => arr[index] + val);
var output = data.reduce(sum);

console.log(output);

This will produce the following output:

[3, 6, 9, 12, 15, 18, 21, 24]

View working example

Answer 9

Answer №5

If all arrays have the same length, you can implement the following solution:

arrayOfArrays = [{
    label: 'First Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
},
{
    label: 'Second Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
},
{
    label: 'Third Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
}
];

let out = arrayOfArrays.reduce((acc, {data}) => acc.map((e, i) => e + data[i]), new Array(8).fill(0));

console.log(out)

The mistake in your code is passing the wrong accumulator parameter, it should be an array and placed within the reduce function rather than the map function.

var result = arrayOfArrays.reduce(function (array1, array2) {
    return array1.map(function (value, index) {
        return value + array2.data[index];
    });
}, Array(8).fill(0));

Answer 10

If all arrays have the same length, you can implement the following solution:

arrayOfArrays = [{
    label: 'First Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
},
{
    label: 'Second Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
},
{
    label: 'Third Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
}
];

let out = arrayOfArrays.reduce((acc, {data}) => acc.map((e, i) => e + data[i]), new Array(8).fill(0));

console.log(out)

The mistake in your code is passing the wrong accumulator parameter, it should be an array and placed within the reduce function rather than the map function.

var result = arrayOfArrays.reduce(function (array1, array2) {
    return array1.map(function (value, index) {
        return value + array2.data[index];
    });
}, Array(8).fill(0));

Answer 11

Answer №6

This is one way to approach the problem:

Create a helper function called transport:

const transport = (arr) => arr[0].map((col, i) => arr.map(row => row[i]));

Prepare the matrix data:

const matrix = arrayOfArrays.map(el => el.data)

Finally, solve the task easily:

const res = transport(matrix).map(arr => arr.reduce((x, y) => x + y))
// > (8) [3, 6, 9, 12, 15, 18, 21, 24]

Answer 12

This is one way to approach the problem:

Create a helper function called transport:

const transport = (arr) => arr[0].map((col, i) => arr.map(row => row[i]));

Prepare the matrix data:

const matrix = arrayOfArrays.map(el => el.data)

Finally, solve the task easily:

const res = transport(matrix).map(arr => arr.reduce((x, y) => x + y))
// > (8) [3, 6, 9, 12, 15, 18, 21, 24]

Answer 13

Answer №7

If you ever find yourself in need of transforming or manipulating values later on, function generators can be quite useful. They allow you to iterate through the values without having to deal with the entire result set at once.

The approach taken in this scenario involves using a function generator with the following logic:

Find the array with the longest length (assuming the lengths may vary).
Retrieve all elements located at index i from 0 to the length of the longest array, and then calculate their sum.

arrayOfArrays = [{
    label: 'First Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Second Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Third Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  }
];

/**
  Sums elements of arrays inside the array vertically.
*/
function* sumVertically(arr) {
  // Find the length of the longest array.
  const longestArrayLength = arr.sort(({length: l1}, {length: l2}) => l1 - l2)[0].length;
  // Grab all elements at index [i] from each array, add them up, and yield the sum.
  for (let i = 0; i < longestArrayLength; i++) yield arr.map(e => e[i]).reduce((a,b) => a + b, 0);
}

const result = [...sumVertically(arrayOfArrays.map(i => i.data))];

console.log(result);

Answer 14

If you ever find yourself in need of transforming or manipulating values later on, function generators can be quite useful. They allow you to iterate through the values without having to deal with the entire result set at once.

The approach taken in this scenario involves using a function generator with the following logic:

Find the array with the longest length (assuming the lengths may vary).
Retrieve all elements located at index i from 0 to the length of the longest array, and then calculate their sum.

arrayOfArrays = [{
    label: 'First Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Second Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  },
  {
    label: 'Third Value',
    data: [1, 2, 3, 4, 5, 6, 7, 8]
  }
];

/**
  Sums elements of arrays inside the array vertically.
*/
function* sumVertically(arr) {
  // Find the length of the longest array.
  const longestArrayLength = arr.sort(({length: l1}, {length: l2}) => l1 - l2)[0].length;
  // Grab all elements at index [i] from each array, add them up, and yield the sum.
  for (let i = 0; i < longestArrayLength; i++) yield arr.map(e => e[i]).reduce((a,b) => a + b, 0);
}

const result = [...sumVertically(arrayOfArrays.map(i => i.data))];

console.log(result);

Calculate the sum of arrays within an array (matrix) by adding the elements

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Retrieve data from the following fields: {"attending":0,"eventid":1,"userid":1} using PHP

Creating a unique data attribute in Alpine.js - A step-by-step guide

To encounter an "undefined" response in the following route of an express application, utilize the next('route') function

The issue of JQuery $(this) malfunctioning when used within a function parameter

Guide on connecting various information to a jquery element through .data() within a custom plugin

PhantomJS in Python Selenium fails to retrieve source code after element click

Select an <li> element from div1 and move it to div2 when a button is clicked

Comparing two datetime objects with time zone offsets in JavaScript: How to determine if one is greater than or less than the other?

Hide the popup menu when the user clicks outside of it

Error: The function keytar.setPassword cannot be executed due to a TypeError

Display real-time information fetched from sessionStorage (in JSON format) on a Listview widget

Contrast between utilizing a WebApp that connects to an API and one that relies on backend

Ensure the video frame stretches to fit the full width

A pop-up box appears when hovering over a radio button

Is it necessary for services in Domain Driven Design to have knowledge of other services, or should they be aware of multiple repositories

Executing a php function upon onchange event triggered by CKEditor

Accessing a JSON file from a nearby location using JavaScript

What's the best way to organize array data for a cleaner look?

Transfer information from .gs (Google Apps Script) to a variable inside a <script> tag in an HTML document

Creating a component in Vue to showcase Axios, based on a straightforward example from the documentation