Javascript Reduce function - concatenate duplicate key values as an array

Question

Hi I'm using reduce to create a more usable JSON structure for the following data.

data = [
  { "0": "key1", "1": "value1" },
  { "0": "key2", "1": "value2" },
  { "0": "key3", "1": "value3" },
  { "0": "key1", "1": "value4" },
];

I used reduce for this, and here is how it looks.

reduce_data = data.reduce((p, c) => {
  p[c["0"]] = c["1"];
  return p;
}, {});
console.log(reduce_data);

Output is as follows

{key1: "value4", key2: "value2", key3: "value3"}

If you see Im missing key1 and its value1. I understand its by design, but Im wondering if there is a way for me to get

{key1: "value1, value4", key2: "value2", key3: "value3"}

Please let me know if I'm using reduce incorrectly. Thanks!

Sure, you need to see if the key already exists, and if it does, append the value. — Dave Newton, Jul 09 '18 at 19:06
Possible duplicate of [How to group an array of objects by key](https://stackoverflow.com/questions/40774697/how-to-group-an-array-of-objects-by-key) — Heretic Monkey, Jul 09 '18 at 21:35

EECOLOR · Answer 1 · 2018-07-09T21:28:13.960

0

Theoretically you are doing it right. The problem is that the 4th element also has key1 which overrides the value with value4.

Update

I read the question too fast. A solution could be:

data.reduce(
  (result, { ['0']: key, ['1']: value }) => ({
    ...result, 
    [key]: [result[key], value].filter(Boolean).join(', ')
  }),
  {}
)

Another way (where the result would have the values as an array):

data.reduce(
  (result, { ['0']: key, ['1']: value }) => ({
    ...result, 
    [key]: [...(result[key] || []), value]
  }),
  {}
)

edited Jul 09 '18 at 21:28

answered Jul 09 '18 at 19:08

EECOLOR

11,184
3
41
75

He knows that. The question is how to concatenate the values of duplicate keys. – Barmar Jul 09 '18 at 20:10

score 0 · Answer 2 · answered Jul 09 '18 at 19:09

Check whether the key exists or not and then append rather than assigning (which overrides the value).

Solution here for you...

data.reduce((p, c) => {
  if (p[c["0"]]) {
    p[c["0"]] += ", " + c["1"];
  } else {
    p[c["0"]] = c["1"];
  }

  return p;
}, {});

Giannis Mp · Accepted Answer · 2018-07-09T19:15:46.917

0

For your specific case you can do it like this:

data = [
  { "0": "key1", "1": "value1" },
  { "0": "key2", "1": "value2" },
  { "0": "key3", "1": "value3" },
  { "0": "key1", "1": "value4" },
];

reduce_data = data.reduce((p, c) => {
  p[c["0"]] = p[c["0"]] ? p[c["0"]] + ", " + c["1"] : c["1"];
  return p;
}, {});
console.log(reduce_data);

edited Jul 09 '18 at 19:15

answered Jul 09 '18 at 19:10

Giannis Mp

1,291
6
13

The ternary here isn't very readable, but I guess it could be slightly shorter like so: `p[c["0"]] = p[c["0"]] ? p[c["0"]] + ", " + c["1"] : c["1"];` – Salomao Rodrigues Jul 09 '18 at 19:14
Thank you! This worked. So now I see my Key has two values, comma separated. I can read this data easily. An additional question I have is, Is there a better way to represent this data? Like `"key1" : {"key1_1": value1, "key1_2" : value2}`. Looking forward to any suggestions! – jr0531 Jul 09 '18 at 19:59
I would use an array for each key since there could be multiple values. For example: { "key1": [ "value1", "value4" ], "key2": [ "value2" ], "key3": [ "value3" ]} – Giannis Mp Jul 10 '18 at 07:17

Mark · Answer 4 · 2018-07-09T19:18:01.720

You can assign it unless it's already there, in which case concat:

data = [
    { "0": "key1", "1": "value1" },
    { "0": "key2", "1": "value2" },
    { "0": "key3", "1": "value3" },
    { "0": "key1", "1": "value4" },
  ];

  reduce_data = data.reduce((p, c) => {
    p[c["0"]] = (p[c["0"]] || '').concat(", ", c["1"])
    return p;
  }, {});
  console.log(reduce_data);

You didn't really ask, but it might be easier to use if you push to an array:

data = [
    { "0": "key1", "1": "value1" },
    { "0": "key2", "1": "value2" },
    { "0": "key3", "1": "value3" },
    { "0": "key1", "1": "value4" },
  ];

  reduce_data = data.reduce((p, c) => {
    (p[c["0"]] || (p[c["0"]] = [])).push(c["1"]);
    return p;
  }, {});
  console.log(reduce_data);

score 0 · Answer 5 · answered Jul 09 '18 at 19:43

Using ES6 destructirung assignment makes it a bit more clean:

var data = [{ "0": "key1", "1": "value1" }, { "0": "key2", "1": "value2" }, { "0": "key3", "1": "value3" },{ "0": "key1", "1": "value4" },];

var result = data.reduce((p, {"0":key, "1": val}) => {

    if (!p.hasOwnProperty(key)) p[key] = [];
    p[key].push(val);
    return p;

}, {});

console.log(result);

Javascript Reduce function - concatenate duplicate key values as an array

5 Answers5