JavaScript Deeply Nested Array filtering

Question

I have created a somehow functional "deeply" nested array filtering functionality. This functionality displays car, which has a color "RED" assigned to them. However the cars, which "pass" the filter is the car, which only has 1 color assigned.
How can ensure that arrays within arrays are being checked by the criteria? Would I require creating a loop within loop? The desired outcome would be that if criteria is set to "RED" it will also display the BMW and SUZUKI as these cars also have this color.

Any help, suggestions or further links to other posts to achieve the desired outcome would be truly appreciated as I was not able to find anything very useful on my own. The post, which has been most useful has been this one - Filtering an array with a deeply nested array in JS

Below I have attached the code snippet of my current code.

const myCars = [
    { name: "BMW",colour: ["White","Red","Black"] },
    { name: "AUDI",colour: ["Yellow","Silver"] },
    { name: "VW",colour: ["Purple","Gold"] },
    { name: "NISSAN",colour: ["White","Black"] },
    { name: "SUZUKI",colour: ["Red"] }, 
];

for (x in myCars) {
  var keys = Object.keys(myCars[x])

  var carSpec = myCars.filter(function(fltr) {
    return (fltr.colour == "Red");

  });
  document.getElementById("show1").innerHTML += carSpec[x].name + " " + "has these colours - " + carSpec[x].colour + "<hr />";
}

<p>Car List.</p>

<p id="show"></p>
<p id="show1"></p>

score 5 · Accepted Answer · answered Aug 21 '18 at 03:45

You need to filter by an includes test over the colour array:

const myCars = [
    { name: "BMW",colour: ["White","Red","Black"] },
    { name: "AUDI",colour: ["Yellow","Silver"] },
    { name: "VW",colour: ["Purple","Gold"] },
    { name: "NISSAN",colour: ["White","Black"] },
    { name: "SUZUKI",colour: ["Red"] }, 
];
const show1 = document.getElementById("show1");
myCars
  .filter(({ colour }) => colour.includes('Red'))
  .forEach(({ name, colour }) => {
    show1.innerHTML += name + " " + "has these colours - " + colour + "<hr />";
  });

<p>Car List.</p>

<p id="show"></p>
<p id="show1"></p>

score 1 · Answer 2 · answered Aug 21 '18 at 04:01

You can use reduce to get an array of cars which have are available in red , then use forEach to loop over it and display the text.

join will join all the contents of an array by the delimiter

const myCars = [{
    name: "BMW",
    colour: ["White", "Red", "Black"]
  },
  {
    name: "AUDI",
    colour: ["Yellow", "Silver"]
  },
  {
    name: "VW",
    colour: ["Purple", "Gold"]
  },
  {
    name: "NISSAN",
    colour: ["White", "Black"]
  },
  {
    name: "SUZUKI",
    colour: ["Red"]
  },

];


let hasRed = myCars.reduce(function(acc, curr) {
  if (curr.colour.indexOf('Red') !== -1) {
    acc.push(curr)
  }
  return acc;

}, []).forEach((item) => {
  document.getElementById("show1").innerHTML += item.name + " " + "has these colours - " + item.colour.join(',') + "<hr />";
})

<p>Car List.</p>

<p id="show"></p>
<p id="show1"></p>

JavaScript Deeply Nested Array filtering

2 Answers2

Linked