Sum values in 2D array based on lookup value - Javascript

Question

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

Based on the value in the first column, I want to sum the values in the array[1] and list the three-character letters. The result I'm trying to get is:

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

I'm not sure of the best approach, I'm fairly new to Javascript. What I've managed to do is get the right result when a value in array[0] isn't repeated, but I can't get a sum or list to work.

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'm sure the answer has to do with map or filter but not sure how... any pointers appreciated. Thank you

EDIT: All three answers below (from Michael Haddad, Nina Scholz, and testing_22) work and are interesting.

Answer 1

You could collect all data for each group and then map the result in order of the names array.

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 2

You can use a combination of map and reduce, as in:

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 vals = [];
    let sum = array.reduce((acc, [idx, number, XXX]) => 
      (idx === id ? (vals.push(XXX), number) : 0) + acc, 0);
    return [
      id, 
      name,
      sum, 
      vals.join(", ")
    ]
})

console.log(result)

Answer 3

A basic approach could be:

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);

You could also implement the joining logic yourself (I actually prefer this version for readability reasons):

   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);