Calculating the total of elements in a 2D array using a specified reference value in Javascript

Question

Calculating the total of elements in a 2D array using a specified reference value in Javascript

I am faced with a scenario where I have two arrays:

const array = [ 
[1, 7, 'AAA'], 
[2, 5, 'BBB'], 
[3, 2, 'CCC'], 
[4, 4, 'DDD'], 
[4, 9, 'EEE'], 
[4, 2, 'FFF'], 
[5, 8, 'GGG'], 
[6, 2, 'HHH']];

const names = [
[1, 'Joe'],
[2, 'Dave'],
[3, 'Mike'],
[4, 'Sandra'],
[5, 'Sue'],
[6, 'Mary']];

In this situation, my goal is to sum the values in the array[1] based on the value in the first column and list the three-character letters. The desired result should be as follows:

const names = [
[1, 'Joe',7,'AAA'],
[2, 'Dave',5,'BBB'],
[3, 'Mike',2,'CCC'],
[4, 'Sandra',15,'DDD, EEE, FFF'],
[5, 'Sue',8,'GGG'],
[6, 'Mary',2,'HHH']]

Being relatively new to Javascript, I am unsure about the most effective approach for this task. While I have been successful with non-repeating values in array[0], achieving a sum or listing seems challenging.

const counter     = (array,value) => array.filter((v) => (v === value)).length;
const arrayCol    = (array,value) => array.map(v => v[value]);
const sum         = (prevVal, curVal) => prevVal + curVal;

names.forEach ((p,e) => {
array.forEach ((v,x) => (counter(arrayCol(array,0),v[0])===1) ?
(v[0]===p[0]) && names[e].push(v[1],v[2]) : 
(v[0]===p[0]) && names[e].push(array.reduce(sum,0)) );
});

console.log(names);

I believe that the solution lies within utilizing map or filter, but I am seeking guidance on how to proceed. Any advice or pointers would be greatly appreciated. Thank you!

UPDATE: I have reviewed all of the responses provided by Michael Haddad, Nina Scholz, and testing_22, and find them all to be valuable and insightful.

javascript arrays multidimensional-array

Answer 1

Answer №1

You can effectively utilize the map and reduce functions together, like so:

const array = [[1, 7, 'AAA'], [2, 5, 'BBB'], [3, 2, 'CCC'],[4, 4, 'DDD'], [4, 9, 'EEE'], [4, 2, 'FFF'], [5, 8, 'GGG'], [6, 2, 'HHH']];
const names = [[1, 'Joe'],[2, 'Dave'],[3, 'Mike'],[4, 'Sandra'],[5, 'Sue'],[6, 'Mary']];

const result = names.map(([id, name]) => {
    let values = [];
    let sum = array.reduce((accumulator, [index, number, text]) =>
      (index === id ? (values.push(text), number) : 0) + accumulator, 0);
    return [
      id,
      name,
      sum,
      values.join(", ")
    ]
})

console.log(result)

Answer 2

You can effectively utilize the map and reduce functions together, like so:

const array = [[1, 7, 'AAA'], [2, 5, 'BBB'], [3, 2, 'CCC'],[4, 4, 'DDD'], [4, 9, 'EEE'], [4, 2, 'FFF'], [5, 8, 'GGG'], [6, 2, 'HHH']];
const names = [[1, 'Joe'],[2, 'Dave'],[3, 'Mike'],[4, 'Sandra'],[5, 'Sue'],[6, 'Mary']];

const result = names.map(([id, name]) => {
    let values = [];
    let sum = array.reduce((accumulator, [index, number, text]) =>
      (index === id ? (values.push(text), number) : 0) + accumulator, 0);
    return [
      id,
      name,
      sum,
      values.join(", ")
    ]
})

console.log(result)

Answer 3

Answer №2

To optimize the process, you can gather all relevant data for each group and then organize the outcome based on the names array sequence.

const
    array = [[1, 7, 'AAA'], [2, 5, 'BBB'], [3, 2, 'CCC'], [4, 4, 'DDD'], [4, 9, 'EEE'], [4, 2, 'FFF'], [5, 8, 'GGG'], [6, 2, 'HHH']],
    names = [[1, 'Joe'], [2, 'Dave'], [3, 'Mike'], [4, 'Sandra'], [5, 'Sue'], [6, 'Mary']],
    groups = array.reduce((r, [id, value, code]) => {
        r[id] ??= [0, ''];
        r[id][0] += value;
        r[id][1] += (r[id][1] && ', ') + code;
        return r;
    }, {}),
    result = names.map(a => [...a, ...groups[a[0]]]);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

To optimize the process, you can gather all relevant data for each group and then organize the outcome based on the names array sequence.

const
    array = [[1, 7, 'AAA'], [2, 5, 'BBB'], [3, 2, 'CCC'], [4, 4, 'DDD'], [4, 9, 'EEE'], [4, 2, 'FFF'], [5, 8, 'GGG'], [6, 2, 'HHH']],
    names = [[1, 'Joe'], [2, 'Dave'], [3, 'Mike'], [4, 'Sandra'], [5, 'Sue'], [6, 'Mary']],
    groups = array.reduce((r, [id, value, code]) => {
        r[id] ??= [0, ''];
        r[id][0] += value;
        r[id][1] += (r[id][1] && ', ') + code;
        return r;
    }, {}),
    result = names.map(a => [...a, ...groups[a[0]]]);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

Answer №3

One possible strategy to tackle this issue is:

const array = [[1, 7, 'AAA'], [2, 5, 'BBB'], [3, 2, 'CCC'], [4, 4, 'DDD'], [4, 9, 'EEE'], [4, 2, 'FFF'], [5, 8, 'GGG'], [6, 2, 'HHH']];
const names = [[1, 'Joe'], [2, 'Dave'], [3, 'Mike'], [4, 'Sandra'], [5, 'Sue'], [6, 'Mary']];

let result = [];
for (let name of names) {
    let newValue = [...name, 0];
    let matchingItems = array.filter(i => i[0] === name[0]);
    let strings = []; // for lack of a better name...

    for (let item of matchingItems) {
        newValue[2] += item[1];
        strings.push(item[2]);
    }
    newValue.push(strings.join(", "));

    result.push(newValue);
}

console.log(result);

An alternative approach would involve writing custom joining logic (which might enhance readability):

   const array = [[1, 7, 'AAA'], [2, 5, 'BBB'], [3, 2, 'CCC'], [4, 4, 'DDD'], [4, 9, 'EEE'], [4, 2, 'FFF'], [5, 8, 'GGG'], [6, 2, 'HHH']];
const names = [[1, 'Joe'], [2, 'Dave'], [3, 'Mike'], [4, 'Sandra'], [5, 'Sue'], [6, 'Mary']];

let result = [];
for (let name of names) {
    let newValue = [...name, 0, ""];
    let matchingItems = array.filter(i => i[0] === name[0]);

    for (let item of matchingItems) {
        newValue[2] += item[1];
        newValue[3] += newValue[3] === "" ? item[2] : `, ${item[2]}`;
    }

    result.push(newValue);
}

console.log(result);

Answer 6

One possible strategy to tackle this issue is:

const array = [[1, 7, 'AAA'], [2, 5, 'BBB'], [3, 2, 'CCC'], [4, 4, 'DDD'], [4, 9, 'EEE'], [4, 2, 'FFF'], [5, 8, 'GGG'], [6, 2, 'HHH']];
const names = [[1, 'Joe'], [2, 'Dave'], [3, 'Mike'], [4, 'Sandra'], [5, 'Sue'], [6, 'Mary']];

let result = [];
for (let name of names) {
    let newValue = [...name, 0];
    let matchingItems = array.filter(i => i[0] === name[0]);
    let strings = []; // for lack of a better name...

    for (let item of matchingItems) {
        newValue[2] += item[1];
        strings.push(item[2]);
    }
    newValue.push(strings.join(", "));

    result.push(newValue);
}

console.log(result);

An alternative approach would involve writing custom joining logic (which might enhance readability):

   const array = [[1, 7, 'AAA'], [2, 5, 'BBB'], [3, 2, 'CCC'], [4, 4, 'DDD'], [4, 9, 'EEE'], [4, 2, 'FFF'], [5, 8, 'GGG'], [6, 2, 'HHH']];
const names = [[1, 'Joe'], [2, 'Dave'], [3, 'Mike'], [4, 'Sandra'], [5, 'Sue'], [6, 'Mary']];

let result = [];
for (let name of names) {
    let newValue = [...name, 0, ""];
    let matchingItems = array.filter(i => i[0] === name[0]);

    for (let item of matchingItems) {
        newValue[2] += item[1];
        newValue[3] += newValue[3] === "" ? item[2] : `, ${item[2]}`;
    }

    result.push(newValue);
}

console.log(result);

Calculating the total of elements in a 2D array using a specified reference value in Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Submitting Data Forms with AJAX on dynamically loaded webpages

Display a single button on hover in Angular 2+ framework

Mongoose opts for the __v field over a traditional date field

Is there a way to convert an array of objects with 2 elements into 2 separate arrays?

Save the API response data to LocalStorage when the button is clicked

The proportion in Highchart appears incorrect when utilizing a "logarithmic" y-axis type

Utilizing the splunk-logging NodeJs package with TypeScript in node v14: A comprehensive guide

In need of styling text using CSS?

A guide on changing a plus sign into a minus sign with CSS transition

Issues in C program when handling extensive arrays

In React Native, the conversion from ReadableNativeMap to Double does not allow for direct casting of value for value

How to extract data from an alert in an Ionic application

AJAX Animated Transition

No data returned from API call in Next.js and Strapi

Received the error 'Headers cannot be set after they have been sent to the client' upon the second request

Activate the button solely when the text field has been populated without any spaces

What is the best way to transfer data from an array to an HTML table?

Unlock the power of TypeScript's inheritance by utilizing static methods for type

Every time I attempt to destructure the state object in react typescript, I encounter the error message stating 'Object is possibly undefined'

What could be causing the dysfunction of the jQuery class adding function?