Distinct values from Array inside Array of objects

Question

Ive got an array of objects. Inside each object there is another array. I want to extract distinct values from these arrays.

var data = [
            {categorie: 'Stuff', type: 'One', designs: ['A', 'B']},
            {categorie: 'Stuff', type: 'Two', designs: ['C']},
            {categorie: 'Stuff', type: 'One', designs: ['D']},
            {categorie: 'Other', type: 'Three', designs: ['C', 'D']}
        ];
console.log([...new Set(data.map(x => x.categorie))]);
console.log([...new Set(data.map(x => x.type))]);

//expected output for designs ['A','B','C','D']

like console.log([...new Set(data.flatMap(x => x.designs))]);? — Thomas
– Thomas, Commented Jul 9, 2019 at 8:10
"expected output for designs" - Why are you then returning x.categorie/x.type? — Andreas
– Andreas, Commented Jul 9, 2019 at 8:10
both other console.logs are just an example how i would return distincts from categorie and type. But dont know how to do it from designs. — hermgerm
– hermgerm, Commented Jul 9, 2019 at 8:11

Maheer Ali · Accepted Answer · 2019-07-09 08:12:37Z

You can use flatMap() instead of map()

var data = [
            {categorie: 'Stuff', type: 'One', designs: ['A', 'B']},
            {categorie: 'Stuff', type: 'Two', designs: ['C']},
            {categorie: 'Stuff', type: 'One', designs: ['D']},
            {categorie: 'Other', type: 'Three', designs: ['C', 'D']}
        ];

console.log([...new Set(data.flatMap(x => x.designs))]);

//expected output for designs ['A','B','C','D']

If your browser doesn't support flatMap() then you can use concat() with spread operator.

var data = [
            {categorie: 'Stuff', type: 'One', designs: ['A', 'B']},
            {categorie: 'Stuff', type: 'Two', designs: ['C']},
            {categorie: 'Stuff', type: 'One', designs: ['D']},
            {categorie: 'Other', type: 'Three', designs: ['C', 'D']}
        ];

console.log([...new Set([].concat(...data.map(x => x.designs)))]);

//expected output for designs ['A','B','C','D']

Nina Scholz · Accepted Answer · 2019-07-09 08:11:09Z

1

You need to take a set from the designs as well.

var data = [{ categorie: 'Stuff', type: 'One', designs: ['A', 'B'] }, { categorie: 'Stuff', type: 'Two', designs: ['C'] }, { categorie: 'Stuff', type: 'One', designs: ['D'] }, { categorie: 'Other', type: 'Three', designs: ['C', 'D'] }],
    unique = data.reduce((s, { designs }) => [...new Set([...s, ...designs])], []);

console.log(unique);

answered Jul 9, 2019 at 8:11

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

claasic Over a year ago

What about let res = [...new Set(data.reduce((a,{designs}) => [...a,...designs],[]))]. Wouldn't it be better to just flatten first and form a set once at the end, instead of forming a set on every reduction step?

Devashish · Accepted Answer · 2019-07-09 08:15:40Z

0

A simple solution is this:

var data = [
            {categorie: 'Stuff', type: 'One', designs: ['A', 'B']},
            {categorie: 'Stuff', type: 'Two', designs: ['C']},
            {categorie: 'Stuff', type: 'One', designs: ['D']},
            {categorie: 'Other', type: 'Three', designs: ['C', 'D']}
        ];

var uniqueLetters = []

data.forEach(obj => {
  obj.designs.forEach(letter => {
    if (uniqueLetters.indexOf(letter) < 0) {
      uniqueLetters.push(letter)
    }
  })
})

console.log(uniqueLetters)

answered Jul 9, 2019 at 8:15

Devashish

1,3102 gold badges11 silver badges22 bronze badges

Comments

Santosh · Accepted Answer · 2019-07-09 08:17:08Z

0

Try this.. Plain JavaScript solution.

var output = [];
for(var i=0; i<data.length; i++){
for(var j=0; j<data[i].designs.length; j++ ){
  if(output.indexOf(data[i].designs[j]) === -1) {
  output.push(data[i].designs[j])
  }
}
}
console.log(output)
//expected output for designs ['A','B','C','D']

answered Jul 9, 2019 at 8:17

Santosh

3,8875 gold badges47 silver badges90 bronze badges

Collectives™ on Stack Overflow

Distinct values from Array inside Array of objects

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related