Javascript reduce() on array of objects, with entries being simple variables and array as well

Question

I'm trying to use the reduce function in order to iterate through an array of objects and to get an output summing up the data shown inside of the array of objects (a kind of duplicate remover in fact).

On data such as :

mainData = [
   {data : {name: "item1", color: "red", type: ["metal", "wood"]}, id: 1},
   {data : {name: "item2", color: "green", type: ["wood"]}, id: 2},
   {data : {name: "item3", color: "green", type: ["wood", "stone", "marble"]}, id: 3},
   {data : {name: "item4", color: "red", type: ["stone"]}, id: 4}
]

when using the function :

const getValues = (data, key) => {
    return data.reduce((acc, item) => {
        if(acc.indexOf(item.data[key]) > -1) {
            return [...acc]
        } else {
            return [...acc, item.data[key]]
        }
    }, [data[0].data[key]]) //initial value
}

It will fork fine if I call this getValues function getValues(mainData, "color") for the color key, giving the following output : ["red", "green"], which is expected.

But if i call the function with getValues(mainData, "type"), this function will ignore most of the values from the array type value from the key type.

I tried to solve it by using a for loop limited by data["type"].length just before the if...else condition of the reduce function, like this :

const getValues = (data, key) => {
    return data.reduce((acc, item) => {
        for(let i = 0; i < item.data[key].length; i++) {
            if(acc.indexOf(item.data[key][i]) > -1) {
                return [...acc]
            } else {
                return [...acc, item.data[key][i]]
            }
        }
    }, [data[0].data[key][0]])
}

But it does not work either.

Anyone has an idea of how to solve this ?

R4ncid · Accepted Answer · 2022-06-07 13:11:17Z

1

you can use flatMap for that

like this

const mainData = [
   {data : {name: "item1", color: "red", type: ["metal", "wood"]}, id: 1},
   {data : {name: "item2", color: "green", type: ["wood"]}, id: 2},
   {data : {name: "item3", color: "green", type: ["wood", "stone", "marble"]}, id: 3},
   {data : {name: "item4", color: "red", type: ["stone"]}, id: 4}
]

const getValue = (data, key) => [...new Set(data.flatMap(({data}) => Array.isArray(data[key])?data[key]: [data[key]]))]

console.log(getValue(mainData, 'name'))
console.log(getValue(mainData, 'type'))

answered Jun 7, 2022 at 13:11

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

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

Comments

Andy · Accepted Answer · 2022-06-07 13:18:28Z

1

It maybe easier to use a Set to dedupe the values.

const mainData=[{data:{name:"item1",color:"red",type:["metal","wood"]},id:1},{data:{name:"item2",color:"green",type:["wood"]},id:2},{data:{name:"item3",color:"green",type:["wood","stone","marble"]},id:3},{data:{name:"item4",color:"red",type:["stone"]},id:4}];

// Pass in the data, and the prop you want to look at
function finder(arr, prop) {

  // Create a new set
  const set = new Set();
  
  // Iterate over the array of objects
  for (const obj of arr) {

    const value = obj.data[prop];

    // If `value` is an array add each value to the set
    if (Array.isArray(value)) {
      value.forEach(v => set.add(v));
    } else {

      // Otherwise just add the value
      set.add(obj.data[prop]);
    }
  }

  // Return an array from the set
  return [...set];

}

console.log(finder(mainData, 'color'));
console.log(finder(mainData, 'type'));
console.log(finder(mainData, 'name'));

answered Jun 7, 2022 at 13:18

Andy

63.6k13 gold badges72 silver badges99 bronze badges

2 Comments

FJTAIL Over a year ago

hi @Andy, thank you for this solution. Unlike @R4ncid and @zer00ne , you're not using flatMap function, is it because of browser compatibility ?

Andy Over a year ago

No. I just thought a simple loop was a little more elegant. (I also don't one-liners).

zer00ne · Accepted Answer · 2022-06-07 14:21:32Z

1

.flatMap() the first layer searching for keyA ("data"). Each data:{...} object is converted into an array of pairs:
```
[["name","item1"],["color","red"],["type",["metal","wood"]],...];
```
Another .flatMap() iterates through the array of pairs and returns a value when it gets a match with keyB. Everything else is returned as an empty array that will result in nothing since .flatMap() flattens it's returns.
```
([k, v]) => k === keyB ? v :[])
```
Finally, the return of both flatMap()s are made into a Set() then the Set is returned as an array sans duplicates.
```
return [...new Set(output)];
```

const mainData = [
   {data : {name: "item1", color: "red", type: ["metal", "wood"]}, id: 1},
   {data : {name: "item2", color: "green", type: ["wood"]}, id: 2},
   {data : {name: "item3", color: "green", type: ["wood", "stone", "marble"]}, id: 3},
   {data : {name: "item4", color: "red", type: ["stone"]}, id: 4}
];

function compact(objArray, keyA, keyB) {
  const output = objArray.flatMap(
    obj => Object.entries(obj[keyA]).flatMap(
      ([k, v]) => k === keyB ? v :[]
    )
  );
  return [...new Set(output)];
}
console.log(compact(mainData, 'data', 'type'));
console.log(compact(mainData, 'data', 'color'));
console.log(compact(mainData, 'data', 'name'));

answered Jun 7, 2022 at 14:21

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

1 Comment

FJTAIL Over a year ago

Hi @zer00ne , thank you for this solution, it works perfectly, and is quite intelligible

Collectives™ on Stack Overflow

Javascript reduce() on array of objects, with entries being simple variables and array as well

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest