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
– trincot, Commented Feb 9, 2022 at 19:15
I'm not clear on what your output should look like. Should it be [ 'green', 'black', 'orange', 'blue', 'red' ],? — Ruan Mendes
– Ruan Mendes, Commented Feb 9, 2022 at 19:16
To clarify, we wonder for example if you want multiple "green" or a single in the output? — Mark Schultheiss
– Mark Schultheiss, Commented Feb 9, 2022 at 19:22

Kinglish · Accepted Answer · 2022-02-09 19:27:58Z

5

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)

edited Feb 9, 2022 at 19:27

answered Feb 9, 2022 at 19:20

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

1 Comment

Ruan Mendes Over a year ago

If this is the output desired, this is a really elegant way and not too hard to grok.

Barmar · Accepted Answer · 2022-02-09 19:20:30Z

1

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.

answered Feb 9, 2022 at 19:20

Barmar

789k57 gold badges554 silver badges669 bronze badges

Comments

Aristide Guy Emmanuel Kouakou · Accepted Answer · 2022-02-09 19:29:01Z

0

 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));

answered Feb 9, 2022 at 19:29

Aristide Guy Emmanuel Kouakou

2463 silver badges7 bronze badges

Collectives™ on Stack Overflow

JavaScript array flatting

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related