過濾不同對象內的嵌套數組，並使用新過濾數組返回 object

Question

我有包含 arrays 我希望過濾的對象。 我想根據類別和划分過濾一組類，然后使用過濾后的 arrays 返回新對象。

這是 JSON 的樣子：

    { "monday": [
    { "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "junior" },
    { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "senior" },
    { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }
  ],
  "tuesday": [
    { "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "teen" },
    { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "teen" },
    { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }
  ],
  "wednesday": [
    { "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "teen" },
    { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "teen" },
    { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }
  ]
}

這是用於過濾和映射過濾數組的反應代碼。

const [classes, setClasses] = useState(data);
  const [category, setCategory] = useState(category);
  const [division, setDivision] = useState(division);

  useEffect(() => {
    let filteredClasses = data;
    if (category !== 'all') {
      filteredClasses = filteredClasses.filter(
        (classes) => classes.category === category
      );
    }
    if (division !== 'all') {
      filteredClasses = filteredClasses.filter(
        (classes) => classes.division === division
      );
    }
    setClasses(filteredClasses);
  }, [category, division]);
     <ul>
            {classes.monday.map((item) => (
              <li key={item.order}>
                {item.time} <br />
                {item.class} <br />
                {item.age}
              </li>
            ))}
          </ul>
          <ul>
            {classes.tuesday.map((item) => (
              <li key={item.order}>
                {item.time} <br />
                {item.class} <br />
                {item.age}
              </li>
            ))}
          </ul>

對此的任何幫助將不勝感激。

Answer 1

看起來您正在嘗試在外部classes Object 上調用filter() ，而不是在單個屬性 Arrays 上調用 filter()。 在這種情況下，您將需要遍歷包含 object 的Object.keys()並依次過濾每個引用的數組。

這是一個在Object.keys()返回的鍵數組上調用reduce()並將filter()的結果分配回累加器中的相同鍵的示例。

 const classes = { "monday": [{ "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "junior" }, { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "senior" }, { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }], "tuesday": [{ "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "teen" }, { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "teen" }, { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }], "wednesday": [{ "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "teen" }, { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "teen" }, { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }] } const division = 'all'; const category = 'jazz'; const filteredClasses = Object.keys(classes).reduce((acc, day) => { acc[day] = classes[day].filter(_class => (division === 'all' || _class.division === division) && (category === 'all' || _class.category === category)); return acc; }, {}); console.log(filteredClasses)

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

這是一個使用Object.fromEntries() 、 map()的示例，並將filter()調用移動到單獨的 function 中。

 const classes = { "monday": [{ "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "junior" }, { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "senior" }, { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }], "tuesday": [{ "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "teen" }, { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "teen" }, { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }], "wednesday": [{ "id": 1, "time": "sometime", "class": "some class", "age": "12", "category": "tap", "division": "teen" }, { "id": 2, "time": "sometime", "class": "some class", "age": "12", "category": "jazz", "division": "teen" }, { "id": 3, "time": "sometime", "class": "some class", "age": "12", "category": "hip hop", "division": "teen" }] } const division = 'all'; const category = 'jazz'; const filterClassArray = (arr) => ( arr.filter(_class => (division === 'all' || _class.division === division) && (category === 'all' || _class.category === category) )); const filteredClasses = Object.fromEntries( Object.keys(classes).map(day => [day, filterClassArray(classes[day])] )); console.log(filteredClasses)

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