JavaScript : Simplifying array with reduce() and map() resulting in undefined

Question

sample = [
    {
      key1: 'value1',
      key2: 'val1',
      key3: [{ subkey1: 'a', subkey2: 'b' }]
    },
    {
      key1: 'value2',
      key2: 'val2',
      key3: [{ subkey1: 'c', subkey2: 'd' }]
    },
    {
      key1: 'value3',
      key2: 'val3',
      key3: [{ subkey1: 'e', subkey2: 'f' }]
    },
    {
      key1: 'value3',
      key2: 'val3',
      key3: [{ subkey1: 'g', subkey2: 'h' }]
    },
    {
      key1: 'value3',
      key2: 'val3',
      key3: [{ subkey1: 'i', subkey2: 'j' }]
    },
    { key1: 'value3', key2: 'val3', key3: [{ subkey1: 'k', subkey2: 'l' }] }
  ];

  result = Array.from(
    this.sample.reduce(
      (m, { key1, key3, key2 }) =>
        m.set(key1, [...(m.get(key1) || []), key3, key2]),
      new Map()
    ),
    ([key1, key3, key2]) => ({ key1, key3, key2 })
  );
  
  console.log(result);

I am new to JavaScript and trying to perform a grouping operation on an object-array which looks something as below :

sample = [{key1: "value1", key2: "val1", key3: [{subkey1: "a", subkey2: "b"}]}
{key1: "value2", key2: "val2", key3: [{subkey1: "c", subkey2: "d"}]}
{key1: "value3", key2: "val3", key3: [{subkey1: "e", subkey2: "f"}]}
{key1: "value3", key2: "val3", key3: [{subkey1: "g", subkey2: "h"}]}
{key1: "value3", key2: "val3", key3: [{subkey1: "i", subkey2: "j"}]}
{key1: "value3", key2: "val3", key3: [{subkey1: "k", subkey2: "l"}]]

I tried the following code to group it based on key1 value:

const result = Array.from(sample.reduce((m, {key1, key3, key2}) =>
m.set(key1, [...(m.get(key1) || []), key3, key2]), new Map()), ([key1, key3, key2]) =>
({key1, key3, key2}));

But I get something like this :

[{key1: "value3", key3: [{subkey1: "e", subkey2: "f"},{subkey1: "g", 
subkey2: "h"},{subkey1: "i", subkey2: "j"},{subkey1: "k", subkey2: 
"l"}], key2: **undefined**},.....etc]

expected:

[{key1: "value3", key3: [{subkey1: "e", subkey2: "f"},{subkey1: "g", 
subkey2: "h"},{subkey1: "i", subkey2: "j"},{subkey1: "k", subkey2: 
"l"}],, key2: "val3"},.....etc]

key 2 remains undefined here. Can somebody tell me where I am doing wrong or any other ways to get the result as expected.

Thanks,

@HR01M8055 grouping is based on key1.

WebDeveloper21
– WebDeveloper21

2021-09-01 04:08:25 +00:00
Commented Sep 1, 2021 at 4:08 — WebDeveloper21
– WebDeveloper21, Commented Sep 1, 2021 at 4:08

Ricky Mo · Accepted Answer · 2021-09-01 04:48:23Z

2

You are using Array.from() and Map object wrongly and basically redundant. You are passing 4 arguments to Map.set(), while it takes only 2 arguments.

let m = new Map();
m.set("1","2","3","4"); // essentially just m.set("1","2"), which set the key "1" to value "2";
let array = Array.from(m);
let array2 = Array.from(m,([a,b,c,d])=>{return {a,b,c,d}});
console.log(array);
console.log(array2);

The most important thing is you are not certain on how do you want to group your objects. Your example dose not provide any information since all values except values of key1 are equal. What result do you expect when group by value of key1 while the members of the group have different values for key2 and key3? Please think thoroughly what your expected input and output are. Design a clear data structure.

answered Sep 1, 2021 at 4:48

Ricky Mo

7,7682 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript : Simplifying array with reduce() and map() resulting in undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest