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

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>

对此的任何帮助将不胜感激。

标签： javascriptarraysreactjs

Answer 1

看起来您正在尝试调用filter()外部classes对象而不是单个属性数组。在这种情况下，您将需要遍历Object.keys()包含对象的 并依次过滤每个引用的数组。

这是一个调用reduce()返回的键数组Object.keys()并将结果分配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; }