如何根据多个值过滤对象

Question

免责声明：我知道这个主题非常不具体。但我不知道如何更好地描述我的问题。请随时在 cmets 中帮助我，我稍后会更新它。

---

我从 MySQL 数据库中获取一组对象到我的 React 应用程序组件。它有这样的结构：

const fetchedData = [
    {
        "id":         46923,
        "type":       "Change Request",
        "business":   "Systems",
        "owner":      "Max",
        "created_on": "2019-08-16T05:39:00.000Z",
        "many more":  "values",
    },
    {
        "id":         46924,
        "type":       "Change Notice",
        "business":   "Tools",
        "owner":      "Max",
        "created_on": "2019-09-06T11:19:00.000Z",
        "many more":  "values",
    },
]

类型只能有三个值：

• 更改请求
• 变更通知
• 更改任务

业务只能具有三个值：

• 系统
• 工具
• 杂项

我有一个反应组件，每个值都有复选框：

function ControlBoard({ applyFilter }) {
  const classes = useStyles();

  const [state, setState] = useState({
    business: {
      systems: false,
      tools: false,
      misc: false,
    },
    type: {
      changerequest: false,
      changenotice: false,
      changetask: false,
    },
  });

  const handleChange = (event) => {
    const split = event.target.name.split("|");
    const group = split[0];
    const name = split[1];
    let prop = state;
    prop[group][name] = event.target.checked;
    setState({ ...prop });
  };

  const setFilter = () => {
    applyFilter(state);
  };

  useEffect(() => {
    setFilter();
  }, [state]);

  return (
    <div className={classes.root}>
      <div className={classes.title}>Businesses</div>
      <div className={classes.items}>
        <div className={classes.item}>
          <FormControlLabel
            control={
              <Checkbox
                checked={state.business.systems}
                onChange={handleChange}
                name="business|systems"
                color="primary"
              />
            }
            label="Systems"
          />
        </div>
        <div className={classes.item}>
          <FormControlLabel
            control={
              <Checkbox
                checked={state.business.tools}
                onChange={handleChange}
                name="business|tools"
                color="primary"
              />
            }
            label="Tools"
          />
        </div>
        <div className={classes.item}>
          <FormControlLabel
            control={
              <Checkbox
                checked={state.business.misc}
                onChange={handleChange}
                name="business|misc"
                color="primary"
              />
            }
            label="Misc"
          />
        </div>
      </div>

      <div className={classes.title}>Type</div>
      <div className={classes.items}>
        <div className={classes.item}>
          <FormControlLabel
            control={
              <Checkbox
                checked={state.type.changerequest}
                onChange={handleChange}
                name="type|changerequest"
                color="primary"
              />
            }
            label="Change Request"
          />
        </div>
        <div className={classes.item}>
          <FormControlLabel
            control={
              <Checkbox
                checked={state.type.changenotice}
                onChange={handleChange}
                name="type|changenotice"
                color="primary"
              />
            }
            label="Change Notice"
          />
        </div>
        <div className={classes.item}>
          <FormControlLabel
            control={
              <Checkbox
                checked={state.type.changetask}
                onChange={handleChange}
                name="type|changetask"
                color="primary"
              />
            }
            label="Change Task"
          />
        </div>
      </div>
    </div>
  );
}

export default ControlBoard;

因此我有我的状态对象：

{
   business: {
      systems: false,
      tools: false,
      misc: false,
   },
   type: {
      changerequest: false,
      changenotice: false,
      changetask: false,
   },
}

如何根据state 过滤我的fetchedData 数组？布尔值（包括业务和类型的多个真值）的每种组合都是可能的。以后会有比业务和类型更多的价值。

要检查获取的数据值，可以使用例如：

state.type[0].toUpperCase() === fetchedDataRow.type.toUpperCase().replace(" ", "")

Answer 1

您可以使用对象键创建这样的匹配函数，这里我们遍历状态和值的每个键，如果其中任何一个为真，我们将检查它。

你可以看到下面的输出

const fetchedData = [{
    "id": 46923,
    "type": "Change Request",
    "business": "Systems",
    "owner": "Max",
    "created_on": "2019-08-16T05:39:00.000Z",
    "many more": "values",
  },
  {
    "id": 46924,
    "type": "Change Notice",
    "business": "Tools",
    "owner": "Max",
    "created_on": "2019-09-06T11:19:00.000Z",
    "many more": "values",
  },
]

const state = {
  business: {
    systems: true,
    tools: true,
    misc: false,
  },
  type: {
    changerequest: false,
    changenotice: false,
    changetask: false,
  },
};


const isMatch = (criteria, item) => {
  let output = true;

  Object.keys(criteria).forEach((element) => {
    const shouldCheck = Object.keys(criteria[element]).some((x) => (criteria[element][x]));

    if (shouldCheck) {
      output = output && Object.keys(criteria[element]).some((x) => {
        return criteria[element][x] && x.toUpperCase() === item[element].toUpperCase().replace(" ", "");
      });
    }
  });
  return output;
};


console.log(fetchedData.filter(x => isMatch(state, x)))

Answer 2

而不是在对象中创建所有字段。如何创建一个数组，其中仅存在您要应用过滤器的那些值。在这种情况下，您不必维护所有字段状态。

 var filter = {
        business: ['systems','tools'],
        type: ['changerequest']
 };

并根据该过滤条件创建一个过滤器，如下所示：-

const fetchedData = [{
    "id": 46923,
    "type": "Change Request",
    "business": "Systems",
    "owner": "Max",
    "created_on": "2019-08-16T05:39:00.000Z",
    "many more": "values",
  },
  {
    "id": 46924,
    "type": "Change Notice",
    "business": "Tools",
    "owner": "Max",
    "created_on": "2019-09-06T11:19:00.000Z",
    "many more": "values",
  }
];

var filter = {
        business: ['Systems','tools'],
        type: ['Change Request']
 };

var result = fetchedData.filter(item => {
   for (var key in filter) {
      return filter[key].indexOf(item[key]) != -1;
   }
});

console.log(result);

Answer 3

.toLowerCase() 和 replace(' ','') 用于形成 fetchedData 以匹配状态键。

const fetchedData = [{
    "id": 46923,
    "type": "Change Request",
    "business": "Systems",
    "owner": "Max",
    "created_on": "2019-08-16T05:39:00.000Z",
    "many more": "values",
  },
  {
    "id": 46924,
    "type": "Change Notice",
    "business": "Tools",
    "owner": "Max",
    "created_on": "2019-09-06T11:19:00.000Z",
    "many more": "values",
  },
]

const state = {
  business: {
    systems: false,
    tools: true,
    misc: false,
  },
  type: {
    changerequest: false,
    changenotice: true,
    changetask: false,
  },
}

const result = fetchedData.filter((obj) => {
  let businessMatch = false;
  let typeMatch = false;
  for (const [key, value] of Object.entries(state.business)) {
    if (key === obj.business.toLowerCase() && value) {
      businessMatch = true;
      break;
    } else {
      businessMatch = false
    }
  }

  for (const [key, value] of Object.entries(state.type)) {
    if (key === obj.type.toLowerCase().replace(' ', '') && value) {
      typeMatch = true;
      break;
    } else {
      typeMatch = false
    }
  }

  if (businessMatch && typeMatch) return obj;
})

console.log(result)