TransWikia.com

Javascript List objects in an array that contain a value in nested array

Stack Overflow Asked by ale_aalt on November 26, 2020

I have an array of colors and I have an array of objects. Each object contains its own array of colors.

The array of colors:

colors = [
  'yellow',
  'blue',
  'red',
  'green',
  'purple',
  'brown',
  'fuscia',
  'grey',
  'beige',
  'orange',
]

The array of objects:

paintings = [{
    name: 'The Wind',
    rating: '25',
    colors: [
      'orange',
      'blue',
    ]
  },
  {
    name: 'The Sons',
    rating: '8',
    colors: [
      'red',
      'green',
      'yellow',
    ]
  },
  {
    name: 'Freedom',
    rating: '16',
    colors: [
      'grey',
      'yellow',
    ]
  },
  {
    name: 'Space',
    rating: '50',
    colors: [
      'purple',
      'green',
      'orange',
    ]
  }
]

What I’m trying to achieve here is to make each of the colors in the colors array an array in itself and each new color array will contain the painting objects that contain the color in its own colors array. Also, each of these objects will be ordered from highest to lowest rating. I need to end up with something like this:

yellow = [{
    name: 'Freedom',
    rating: '16',
    colors: [
      'grey',
      'yellow',
    ]
  },
  {
    name: 'The Sons',
    rating: '8',
    colors: [
      'red',
      'green',
      'yellow',
    ]
  }
]

green = [{
  name: 'Space',
  rating: '50',
  colors: [
    'purple',
    'green',
    'orange',
  ]
} {
  name: 'The Sons',
  rating: '8',
  colors: [
    'red',
    'green',
    'yellow',
  ]
}]

orange = [{
  name: 'Space',
  rating: '50',
  colors: [
    'purple',
    'green',
    'orange',
  ]
} {
  name: 'The Wind',
  rating: '25',
  colors: [
    'orange',
    'blue',
  ]
}]

And so on…

The above data is obviousy dummy data. I’m actually looping through a very large array. I’ve extracted the colors array by looping through the objects, flattening the array with flat() and creating a new colors array with Set() so I could have a list of colors to look up within each object.

So, how could the above be achieved in the most efficient way?

Additional Info for solution:

I ended up grouping the array after sorting the original data in the folliwng way:

paintings.forEach((i) => {
    paintings.sort((a, b) => b.rating - a.rating)
})

const colorGroup = colors.map((color) => ({
    [color]: paintings
    .filter((painting) => painting.colors.includes(color))
}));

Then I am limiting to displaying only 25 from my vue-for loop:

<div v-for="painting in colorGroup.slice(0, 25)">
    {{ painting }}
</div>

Thanks for your help!

2 Answers

Try this.

var paintings = [{
    name: 'The Wind',
    rating: '25',
    colors: [
      'orange',
      'blue',
    ]
  },
  {
    name: 'The Sons',
    rating: '8',
    colors: [
      'red',
      'green',
      'yellow',
    ]
  },
  {
    name: 'Freedom',
    rating: '16',
    colors: [
      'grey',
      'yellow',
    ]
  },
  {
    name: 'Space',
    rating: '50',
    colors: [
      'purple',
      'green',
      'orange',
    ]
  }
];
var colors = [
  'yellow',
  'blue',
  'red',
  'green',
  'purple',
  'brown',
  'fuscia',
  'grey',
  'beige',
  'orange',
];

const colorObj = colors.map((color) => ({
  [color]: paintings.filter((painting) => painting.colors.includes(color)).sort((a, b) => b.rating - a.rating)
}));

console.log(colorObj);

Correct answer by Vivek Jain on November 26, 2020

You can use this ... i just threw it together...

const colors = [
    'yellow',
    'blue',
    'red',
    'green',
    'purple',
    'brown',
    'fuscia',
    'grey',
    'beige',
    'orange',
]

const paintings = [
    {
        name: 'The Wind',
        rating: '25',
        colors: [
            'orange',
            'blue',
        ]
    },
    {
        name: 'The Sons',
        rating: '8',
        colors: [
            'red',
            'green',
            'yellow',
        ]
    },
    {
        name: 'Freedom',
        rating: '16',
        colors: [
            'grey',
            'yellow',
        ]
    },
    {
        name: 'Space',
        rating: '50',
        colors: [
            'purple',
            'green',
            'orange',
        ]
    }
]

const resultObject = {}

colors.forEach(color => {
  paintings.forEach(painting => {
    if (painting.colors.includes(color)){
      if(!resultObject[color])
        resultObject[color] = []
      resultObject[color].push(painting)
    }
  })
})

console.log(resultObject)

Answered by jremi on November 26, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP