JavaScript array flatting

Question

i need to get every unique color in the array below fit in one single array

const colours = [{
    mood: "happy",
    fish: "robin",
    colours: ["blue", "green"]
  },
  {
    mood: "tired",
    fish: "panther",
    colours: ["green", "black", "orange", "blue"]
  },
  {
    mood: "sad",
    fish: "goldfish",
    colours: ["green", "red"]
  }
];
console.log(colours.map(e => {
  let flatArray = e.colours.reduce((acc, curVal) => {
    return acc.concat(curVal)
  }, []);
  return flatArray
}))

It currently outputs:

[
   [ 'blue', 'green' ],
   [ 'green', 'black', 'orange', 'blue' ],
   [ 'green', 'red' ]
]

It is nice that you provide the output for the code, but more important is what you would *need* the output to be. — trincot, Feb 09 '22 at 19:15
I'm not clear on what your output should look like. Should it be `[ 'green', 'black', 'orange', 'blue', 'red' ],`? — Ruan Mendes, Feb 09 '22 at 19:16
To clarify, we wonder for example if you want multiple "green" or a single in the output? — Mark Schultheiss, Feb 09 '22 at 19:22

Kinglish · Accepted Answer · 2022-02-09T19:27:58.033

Not sure if this is what you're after, but this will create a single array of unique colors.

let unique = [...new Set(colours.flatMap(c => c.colours))]

flatMap() allows us to cycle through and create a one dimensional array of the existing colours, while [...new Set(array)] lets us strip out duplicates

colours = [{
    mood: "happy",
    fish: "robin",
    colours: ["blue", "green"]
  },
  {
    mood: "tired",
    fish: "panther",
    colours: ["green", "black", "orange", "blue"]
  },
  {
    mood: "sad",
    fish: "goldfish",
    colours: ["green", "red"]
  }
]

let unique = [...new Set(colours.flatMap(c => c.colours))]
console.log(unique)

If this is the output desired, this is a really elegant way and not too hard to grok. — Ruan Mendes, Feb 09 '22 at 19:23

score 1 · Answer 2 · answered Feb 09 '22 at 19:20

You don't need reduce. You can simply pass all the colours arrays to concat() with argument spreading.

let colours_array = [].concat(...colours.map(el => el.colours));

Then see Remove duplicate values from JS array for how to get just the unique colours from this result.

score 0 · Answer 3 · answered Feb 09 '22 at 19:29

 let colours = [{
        mood: "happy",
        fish: "robin",
        colours: ["blue", "green"]
    },
    {
        mood: "tired",
        fish: "panther",
        colours: ["green", "black", "orange", "blue"]
    },
    {
        mood: "sad",
        fish: "goldfish",
        colours: ["green", "red"]
    }];


let distinct =(value,index,self)=>{return self.indexOf(value)===index;};

console.log(colours.reduce((acc, curVal) => {
        return acc.concat(curVal.colours)
    }, []).filter(distinct));

JavaScript array flatting

3 Answers3