Javascript 如何基于多个值筛选对象

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

---

我从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",
    },
]

该类型只能有三个值：

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

企业只能有三个价值观：

• 系统
• 工具
• 杂项

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

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;

如何根据我的

状态

筛选我的

fetchedData

数组？布尔值的每个组合（包括业务和类型的多个真值）都是可能的。以后，将有比业务和类型更多的值

要对照提取的数据值进行检查，可以使用以下方法，例如：

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

---

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

您可以看到下面的输出

const fetchedData=[{
“id”：46923，
“类型”：“变更请求”，
“业务”：“系统”，
“所有者”：“最大值”，
“创建日期”：“2019-08-16T05:39:00.000Z”，
“更多”：“价值观”，
},
{
“id”：46924，
“类型”：“变更通知单”，
“业务”：“工具”，
“所有者”：“最大值”，
“创建日期”：“2019-09-06T11:19:00.000Z”，
“更多”：“价值观”，
},
]
常量状态={
业务：{
系统：是的，
工具：对，
杂项：错误，
},
类型：{
更改请求：false，
更改通知：错误，
changetask:false，
},
};
常量isMatch=（标准，项目）=>{
让输出=真；
Object.key（条件）.forEach（（元素）=>{
const shouldCheck=Object.key（条件[element]）。一些（（x）=>（条件[element][x]）；
如果（应检查）{
输出=输出和对象。键（条件[元素]）。某些（（x）=>{
返回条件[element][x]&&x.toUpperCase（）==项[element].toUpperCase（）.replace（“，”）；
});
}
});
返回输出；
};
console.log（fetchedData.filter（x=>isMatch（state，x））

。toLowerCase（）和replace（“”，“”，）用于形成与状态键匹配的fetchedData

const fetchedData=[{
“id”：46923，
“类型”：“变更请求”，
“业务”：“系统”，
“所有者”：“最大值”，
“创建日期”：“2019-08-16T05:39:00.000Z”，
“更多”：“价值观”，
},
{
“id”：46924，
“类型”：“变更通知单”，
“业务”：“工具”，
“所有者”：“最大值”，
“创建日期”：“2019-09-06T11:19:00.000Z”，
“更多”：“价值观”，
},
]
常量状态={
业务：{
系统：错误，
工具：对，
杂项：错误，
},
类型：{
更改请求：false，
注意：是的，
changetask:false，
},
}
const result=fetchedData.filter（（obj）=>{
让businessMatch=false；
让typeMatch=false；
for（Object.entries（state.business））的常量[key，value]{
if（key==obj.business.toLowerCase（）&&value）{
businessMatch=true；
打破
}否则{
businessMatch=false
}
}
for（Object.entries（state.type））的常量[key，value]{
if（key==obj.type.toLowerCase（）.replace（“”，，）&&value）{
typeMatch=true；
打破
}否则{
typeMatch=false
}
}
if（businessMatch&&typeMatch）返回obj；
})
log（result）

而不是在对象中创建所有字段。创建一个数组，其中只显示那些您希望应用过滤器的值，怎么样。在这种情况下，您不必维护所有字段状态

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

并根据该筛选条件创建一个筛选，如下所示：-

const fetchedData=[{
“id”：46923，
“类型”：“变更请求”，
“业务”：“系统”，
“所有者”：“最大值”，
“创建日期”：“2019-08-16T05:39:00.000Z”，
“更多”：“价值观”，
},
{
“id”：46924，
“类型”：“变更通知单”，
“业务”：“工具”，
“所有者”：“最大值”，
“创建日期”：“2019-09-06T11:19:00.000Z”，
“更多”：“价值观”，
}
];
变量过滤器={
业务：[“系统”、“工具”]，
类型：[“更改请求”]
};
var result=fetchedData.filter（项=>{
for（过滤器中的var键）{
返回过滤器[key].indexOf（项[key]）！=-1；
}
});
控制台日志（结果）

这是一个很好且有用的答案，但如果多个

业务

或

类型

值为真，则此答案无效。例如，

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

它越来越近了。现在，当我筛选多个业务时，它忽略了类型的业务值。这意味着，当我检查工具和系统时，一切正常。当我添加变更请求时，无论业务是什么，它都会添加每个变更请求。让我检查一下，然后返回you@T.Karter你现在能检查一下吗：）就这样！伟大的此代码未检查任何组合。业务和类型可以有多个真值

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