如何根据配置对象创建过滤条件来过滤数组的数据项？

如何解决如何根据配置对象创建过滤条件来过滤数组的数据项？

我有一个进程，它根据复选框状态的变化动态地创建一种 config 对象，它描述了应该如何构建过滤数据项数组的条件。

过滤器配置可能看起来像这样...

const filter = {
  publicationType: ['type-1','type-2'],termType: ['term-1','term-2'],reportFormat: ['xml'],}

一个简化的数据项列表看起来像这样......

const data = [
  { id: 1,reportFormat: 'txt',termType: 'term-1',publicationType: 'type-1' },{ id: 2,reportFormat: 'xml',termType: 'term-2',publicationType: 'type-2' },{ id: 3,]

我希望条件匹配每个类别/类型（配置的键），但它的值可以是类别/类型数组中的任何一个。 >

根据提供的示例数据和规范，预期的过滤结果将是......

[{ id: 2,publicationType: 'type-2' }]

根据提供的 filter 配置对象构建正确过滤条件的方法如何。

下面是我尝试创建过滤器功能，但如果我尝试过滤多个 Select 组件 - 数据重复，则过滤只能在单个 Select 组件上正常工作。

const handleFilter = (val) => {
    const filterKeys = Object.keys(val);
    const filteredStats = [];

    // loop objects in fetched arr
    for (const item of stat) {
      // loop properties by which filtering data

      filterKeys.forEach((keys) => {
        // check if data property match with a filtering property in array

        const isPresent = val[keys].some((key) => {
          const statProperty = item[keys];
          const filterProperty = key;
          return filterProperty === statProperty;
        });
        if (isPresent) {
          filteredStats.push(item);
        }
      });
    }
    setfilteredState(filteredStats);
  };

https://codesandbox.io/s/checkbox-filter-vqex7?file=/src/App.js

解决方法

该方法的基本技术之一是利用这样一个事实，即几乎每个 Array 方法都允许额外传递一个 target 对象，该解决方案使用该对象，例如Array.prototype.filter 和 Array.prototype.every

主要方法是为数据数组的 filter 方法的每次迭代读取和应用过滤器配置。

此函数需要迭代 every key-value(List) 对配置的 entries 以检查特定数据项是否与特定配置的条件条目匹配.

后一个任务由另一个可以访问数据项并且“知道”两者的函数完成，该数据项当前要检查property-key 以及可能有效的属性值的列表，这样可以轻松检查最终条件的some是否适用。

还有一个边缘情况，空值列表，需要由后一个函数处理。由于其检查的真实性依赖于 some ...（而 some 对空数组的默认返回值为 false ... [].some(x => true) === false） ... 一必须通过显式返回 true 来单独处理此场景，以使其满足 valueList.length === 0 的先决条件。

function doesBoundItemMatchConditionEntry([key,valueList]) {
  const item = this;
  const itemValue = item[key];
  return ((
    valueList.length === 0
  ) || (
    item.hasOwnProperty(key) &&
    valueList.some(value => value === itemValue)
  ));
}
function doesItemMatchConditionsOfBoundConfig(item) {
  // const config = this;
  return Object
    .entries(this)
    .every(doesBoundItemMatchConditionEntry,item);
}

const filterConfig = {
  publicationType: ['type-1','type-2'],termType: ['term-1','term-2'],reportFormat: ['xml'],}
const sampleData = [
  { id: 1,reportFormat: 'txt',termType: 'term-1',publicationType: 'type-1' },{ id: 2,reportFormat: 'xml',termType: 'term-2',publicationType: 'type-2' },{ id: 3,{ id: 4,{ id: 5,{ id: 6,]

console.log(
  'sampleData.filter(doesItemMatchConditionsOfBoundConfig,filterConfig) ...',sampleData.filter(doesItemMatchConditionsOfBoundConfig,filterConfig)
);
console.log(
`sampleData.filter(doesItemMatchConditionsOfBoundConfig,{
    publicationType: ['type-2'],termType: ['term-1'],reportFormat: [],}) ...`,})
);

.as-console-wrapper { min-height: 100%!important; top: 0; }