如何根據 4 個條件過濾一組數據？

Question

我有這樣結構的數據：

[
 {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”的所有項目。

謝謝。

Answer 1

也許像這樣：

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

Answer 2

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

Answer 3

我已經實現了使用 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>
    );
}