过滤不同对象中的嵌套数组，并使用新的过滤数组返回对象

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" }
]
}

这是用于过滤和映射经过过滤的数组的react代码。

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()，而不是在单个属性Arrays上调用。在这种情况下，您需要迭代包含对象的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; }