过滤不同对象内的嵌套数组并返回具有新过滤数组的对象

Question

我有包含我希望过滤的数组的对象。我想根据类别和划分过滤一个类数组，然后用过滤后的数组返回新对象。

这是 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 对象上调用 filter()，而不是在单个属性数组上调用。在这种情况下，您将需要遍历包含对象的 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() 调用移动到一个单独的函数中。

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; }