Filter through array with another array

Question

I'm trying to create search with React JS.

I have one array (cars) through which I want to search. I have an array of filters (one in this case) which I need to apply. And at the end I have the content of that filter.

I have thus three arrays of objects :

• cars (List of all cars). It looks as follows :

  let cars = [
      {"id":20,"listID":3,"make":"Golf"}, 
      {"id":21,"listID":3,"make":"Passat"},
      {"id":22,"listID":3,"make":"Audi"},
      {"id":23,"listID":3,"make":"Touran"},
      {"id":24,"listID":3,"make":"Touran"}
  ];
  

• filters (array with all filters - in this case there is only one filter) :

  let filters = [
          {"name":"FAVORITES","values":[      
                                {"carID":21,"listID":3,"userID":12},  
                                {"carID":22,"listID":3,"userID":12}
                             ]
          }
  ];
  

• favorites (content of that filter) :

  let favorites = [
      {"carID":21,"listID":3,"userID":12}, 
      {"carID":22,"listID":3,"userID":12}
  ];
  

The render function is as follows :

render(){
    return cars.filter(car => filters.every(filter => filterItem(filter, car)))
}

Thus I filter through all cars, apply every filter and then call filterItem function for every car and every filter.

And filterItem function (where I'm trying to get the results) is as follows :

function filterItem(filter, car) {
    switch(filter.name) {
        case "FAVORITES":
                return filter.values.map(f => f).every(v => car.id === v.carID && car.listID === v.listID);
        default:
            return true;
    }
}

This all together in one component :

let favorites = [
    {"carID":21,"listID":3,"userID":12}, 
    {"carID":22,"listID":3,"userID":12}
];


let cars = [
    {"id":20,"listID":3,"make":"Golf"}, 
    {"id":21,"listID":3,"make":"Passat"},
    {"id":22,"listID":3,"make":"Audi"},
    {"id":23,"listID":3,"make":"Touran"},
    {"id":24,"listID":3,"make":"Touran"}
];

let filters = [
    {"name":"FAVORITES","values":[
                                {"carID":21,"listID":3,"userID":12},    
                                {"carID":22,"listID":3,"userID":12}
                               ]
  }
]

function filterItem(filter, car) {
    switch(filter.name) {
        case "FAVORITES":
            return filter.values.map(f => f).every(v => car.id === v.carID && car.listID === v.listID);
        default:
            return true;
    }
}

class Test extends React.Component {
    render(){
        return (
        <div>
            {cars.filter(car => filters.every(filter => filterItem(filter, car)))}
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

Thus I want to search through cars, and apply all filters (only one in this case) and get the results.

Thus, in this case the result should be :

let results = [
    {"id":21,"listID":3,"make":"Passat"},
    {"id":22,"listID":3,"make":"Audi"}
]

But with my code I get nothing.

Any advice?

Here is fiddle.

Answer 1

You're asking if a car object matches every of the values in filter, which it can never do. What you've meant to write, I think, is some. some checks if a car matches one of the values in the filter. For example:

let favorites = [
    {"carID":21,"listID":3,"userID":12}, 
    {"carID":22,"listID":3,"userID":12}
];


let cars = [
    {"id":20,"listID":3,"make":"Golf"}, 
    {"id":21,"listID":3,"make":"Passat"},
    {"id":22,"listID":3,"make":"Audi"},
    {"id":23,"listID":3,"make":"Touran"},
    {"id":24,"listID":3,"make":"Touran"}
];

let filters = [
    {"name":"FAVORITES","values":[
      {"carID":21,"listID":3,"userID":12},    
      {"carID":22,"listID":3,"userID":12}
    ]
  }
]

function filterItem(filter, car) {
    switch(filter.name) {
        case "FAVORITES":
            return filter
              .values
            // Here, we change `every` to `some`, since a car has to match only ONE value
              .some(v => car.id === v.carID && car.listID === v.listID);
        default:
            return true;
    }
}

var favFilter = filterItem.bind(null, filters[0]);
var filteredCars = cars.filter(favFilter);
console.log(filteredCars);