title: Javascript List objects in an array that contain a value in nested array
body: <p>I have an array of colors and I have an array of objects. Each object contains its own array of colors.</p>
  <p>The array of colors:</p>
  <pre><code>colors = [
    'yellow',
    'blue',
    'red',
    'green',
    'purple',
    'brown',
    'fuscia',
    'grey',
    'beige',
    'orange',
  ]
  </code></pre>
  <p>The array of objects:</p>
  <pre><code>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',
      ]
    }
  ]
  </code></pre>
  <p>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:</p>
  <pre><code>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',
    ]
  }]
  </code></pre>
  <p>And so on...</p>
  <p>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 <code>flat()</code> and creating a new colors array with <code>Set()</code> so I could have a list of colors to look up within each object.</p>
  <p>So, how could the above be achieved in the most efficient way?</p>
  <p><strong>Additional Info for solution:</strong></p>
  <p>I ended up grouping the array after sorting the original data in the folliwng way:</p>
  <pre><code>paintings.forEach((i) =&gt; {
      paintings.sort((a, b) =&gt; b.rating - a.rating)
  })
  
  const colorGroup = colors.map((color) =&gt; ({
      [color]: paintings
      .filter((painting) =&gt; painting.colors.includes(color))
  }));
  </code></pre>
  <p>Then I am limiting to displaying only 25 from my <code>vue-for</code> loop:</p>
  <pre><code>&lt;div v-for=&quot;painting in colorGroup.slice(0, 25)&quot;&gt;
      {{ painting }}
  &lt;/div&gt;
  </code></pre>
  <p>Thanks for your help!</p>