javascript - 用另一个数组过滤数组

Question

我正在尝试使用 React JS 创建搜索。

我有一个要搜索的数组(汽车)。我有一组过滤器(在本例中为一个)需要应用。最后我得到了那个过滤器的内容。

因此我有三个对象数组:

• 汽车(所有汽车的列表)。它看起来如下:

  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}
                             ]
          }
  ];
  

• 收藏夹(该过滤器的内容):

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

渲染函数如下:

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

因此，我过滤所有汽车，应用每个过滤器，然后为每辆汽车和每个过滤器调用 filterItem 函数。

filterItem 函数(我试图获取结果的地方)如下:

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

这一切都在一个组件中:

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

因此我想搜索汽车，并应用所有过滤器(在这种情况下只有一个)并获得结果。

因此，在这种情况下，结果应该是:

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

但是我的代码一无所获。

有什么建议吗？

Here is fiddle.

Answer 1

您要询问 car 对象是否匹配 filter 中的每个 值，这是它永远做不到的。我认为您要写的是 some。 some 检查汽车是否匹配过滤器中的一个值。例如:

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