[英]How can I filter a set of data based on 4 conditions?
我有这样结构的数据:
[
{title: 'a', washday: 'true', cutday: 'false', colorday: 'true', deepconditionday: 'true'},
{title: 'b', washday: 'false', cutday: 'true', colorday: 'false', deepconditionday: 'false'},
{title: 'c', washday: 'true', cutday: 'false', colorday: 'true', deepconditionday: 'true'},
{title: 'd', washday: 'false', cutday: 'false', colorday: 'false', deepconditionday: 'false'},
]
我的应用程序中也有cutday 、 colorday 、 deepconditionday和washday 的状态,其中每个状态都有一个开关可以在布尔值 true 和 false 之间切换。
如何根据打开的状态过滤上述数据? 例如,如果只打开 colorday,我想显示 colorday 为“true”的所有项目。 如果 deepconditionday 和 cutday 都打开,我想显示 cutday 和 deepconditionday 都为“true”的所有项目。
谢谢。
也许像这样:
let titleFilter = "a";
let washdayFilter = true;
let cutdayFilter = true;
let filteredData = data.filter(
(datapoint) =>
datapoint.title == titleFilter &&
datapoint.washday == washdayFilter.toString() &&
datapoint.cutday == cutdayFilter.toString()
);
const data = [
{title: 'a', washday: 'true', cutday: 'false', colorday: 'true', deepconditionday: 'true'},
{title: 'b', washday: 'false', cutday: 'true', colorday: 'false', deepconditionday: 'false'},
{title: 'c', washday: 'true', cutday: 'false', colorday: 'true', deepconditionday: 'true'},
{title: 'd', washday: 'false', cutday: 'false', colorday: 'false', deepconditionday: 'false'}
]
const filterData = (data, isWashDay, isCutDay, isColorDay, isDeepConditionDay)=>{
return data.filter((item)=>{
(isWashDay === 'any' | isWashDay ==== item.washday) &&
(isCutDay === 'any' | isCutDay ==== item.cutday) &&
(isColorDay === 'any' | isColorDay ==== item.colorday) &&
(isDeepConditionDay === 'any' | isDeepConditionDay ==== item.deepconditionday)
})
}
console.log(filterData(data, 'true', 'any', 'any', 'any'))
更多信息: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
请注意,您使用了 'true' 和 'false' 作为字符串,而不是布尔值,所以我也这样做了。 您应该使用布尔值并相应地更改代码https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
我已经实现了使用 ReactJS 和 MaterialUI 的示例。 只需将状态用于开关并按状态过滤。 链接演示: https : //codesandbox.io/s/material-demo-forked-176e3?file=/demo.js
import React, { useState } from 'react';
import Switch from "@material-ui/core/Switch";
export default function DisableElevation() {
const [isWashday, setIsWashday] = useState(false);
const [isCutday, setIsCutday] = useState(false);
const [isColorday, setIsColorday] = useState(false);
const [isDeepconditionday, setIsDeepconditionday] = useState(false);
const data = [
{title: 'a', washday: true, cutday: false, colorday: true, deepconditionday: true},
{title: 'b', washday: false, cutday: true, colorday: false, deepconditionday: false},
{title: 'c', washday: true, cutday: false, colorday: true, deepconditionday: true},
{title: 'd', washday: false, cutday: false, colorday: false, deepconditionday: false},
];
const handleChange = (event) => {
switch (event.target.name) {
case 'isWashday':
setIsWashday(event.target.checked);
break;
case 'isCutday':
setIsCutday(event.target.checked);
break;
case 'isColorday':
setIsColorday(event.target.checked);
break;
case 'isDeepconditionday':
setIsDeepconditionday(event.target.checked);
break;
default:
}
};
return (
<div>
<div> {data.filter(datum => (!isWashday || datum.washday) && (!isCutday || datum.cutday) && (!isColorday || datum.colorday) && (!isDeepconditionday || datum.deepconditionday)).map(r => r.title + " ")} </div>
<div>
<span>isWashday</span>
<Switch
checked={isWashday}
onChange={handleChange}
name="isWashday"
inputProps={{ "aria-label": "secondary checkbox" }}
/>
</div>
<div>
<span>isCutday</span>
<Switch
checked={isCutday}
onChange={handleChange}
name="isCutday"
inputProps={{ "aria-label": "secondary checkbox" }}
/>
</div>
<div>
<span>isColorday</span>
<Switch
checked={isColorday}
onChange={handleChange}
name="isColorday"
inputProps={{ "aria-label": "secondary checkbox" }}
/>
</div>
<div>
<span>isDeepconditionday</span>
<Switch
checked={isDeepconditionday}
onChange={handleChange}
name="isDeepconditionday"
inputProps={{ "aria-label": "secondary checkbox" }}
/>
</div>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.