I'd like to filter an array of objects. The array is a list of sport classes, and the objects are the classes.
It looks like this :
const list = [{category: "yoga", level: "beginner", duration: "15 minutes"}]
I have to apply filter so the user can choose between category (yoga, pilates...) level (beginner, advanced..).
I need to find the intersection of the filter, meaning if "yoga" and "beginner" are selected, I'd like to return only beginner yoga classes.
User can turn true/false the variables beginnnerFilter etc.. and the variables cardio/yoga etc... So if the yoga filter is true, yogaFilter = "yoga". If false, yogaFilter = ""
Example:
function filterIntersect() {
let filteredListCategory = [];
let filteredListLevel = [];
for(let i = 0; i < list.length; i++) {
if (list[i].category.toLowerCase() === cardio) {
filteredListCategory.push(list[i])
} else if (list[i].category.toLowerCase() === yoga) {
filteredListCategory.push(list[i])
} else if (list[i].category.toLowerCase() === boxing) {
filteredListCategory.push(list[i])
} else if (list[i].category.toLowerCase() === dance) {
filteredListCategory.push(list[i])
} else if (list[i].category.toLowerCase() === pilates) {
filteredListCategory.push(list[i])
} else if (list[i].category.toLowerCase() === stretching) {
filteredListCategory.push(list[i])
}
}
if (allFilterCategory === true) {
filteredListCategory = [...list];
}
for(let k = 0; k < list.length; k++) {
if (list[k].level.toLowerCase() === beginnerFilter) {
filteredListLevel.push(list[k])
} else if (list[k].level.toLowerCase() === intermediateFilter) {
filteredListLevel.push(list[k])
} else if (list[k].level.toLowerCase() === advancedFilter) {
filteredListLevel.push(list[k])
}
}
if (allFilterLevel === true) {
filteredListLevel = [...list];
}
let finalList = filteredListCategory.filter(item=> filteredListLevel.includes(item));
return finalList.length === 0 ? list : finalList;
}
I manage to return a filtered array but it doesn't work as expected. Sometimes the filters do not apply and I have the full list instead of the filtered list. I'm not sure the for loop is appropriate here? I also tried using new Set but was not working either. Big thanks.
You can use the .filter and .some method of arrays instead of if statements and for loops. E.g
const categoryChoices = [ { category: "yoga", checked: false }, { category: "meditation", checked: true }, { category: "pilates", checked: false }, { category: "cardio", checked: true }, ]; const levelsChoices = [ { level: "beginner", checked: true }, { level: "intermediate", checked: true }, { level: "advanced", checked: false }, ]; const data = [ { category: "yoga", level: "beginner", duration: '30 minutes' }, { category: "yoga", level: "intermediate", duration: '60 minutes' }, { category: "yoga", level: "advanced", duration: '90 minutes' }, { category: "meditation", level: "beginner", duration: '30 minutes' }, { category: "meditation", level: "intermediate", duration: '60 minutes' }, { category: "meditation", level: "advanced", duration: '90 minutes' }, { category: "pilates", level: "beginner", duration: '30 minutes' }, { category: "pilates", level: "intermediate", duration: '60 minutes' }, { category: "pilates", level: "advanced", duration: '90 minutes' }, { category: "cardio", level: "beginner", duration: '30 minutes' }, { category: "cardio", level: "intermediate", duration: '60 minutes' }, { category: "cardio", level: "advanced", duration: '90 minutes' }, ]; const checkedCategories = categoryChoices .filter((c) => c.checked) .map((c) => c.category); const checkedLevels = levelsChoices .filter((l) => l.checked) .map((l) => l.level); const filteredData = data.filter( ({ category, level }) => checkedCategories.some((c) => c === category) && checkedLevels.some((l) => l === level) ); console.log(filteredData);