如何通过删除标签来过滤数组?

Question

我正在尝试重新过滤数组，但访问 selectedn 参数的路径似乎有点棘手。 整个项目应该过滤 3 个参数，但其他 2 个参数正在运行。

点击过滤器，我们过滤正确。但是在单击跨度时，我想再次开始过滤当前显示的每个标签。

如何让它工作(在这里，如果我们取消过滤器，我们应该得到两个食谱)，但是如果应用了更多的食谱和更多的标签，如何让它工作？

<button class="btn">Filter</button>
<span class="tag">Jus de citron</span>

async function getRecipes() {
const response = await ((await fetch("./data.json")).json())
const recipes = response.recipes;
console.log(recipes)
return ({ recipes: [...recipes] });
};

async function filter() {
const { recipes } = await getRecipes()
const btn = document.querySelector(".btn");
let filteredRecipes = [];
btn.addEventListener("click", () => { //Only click once (no security for example)
filteredRecipes.push(recipes.filter(recipe => {
recipe.ingredients.filter(({ingredient}) => {
if(ingredient.includes("Jus de citron")) return filteredRecipes.push(recipe)
})
}))
filteredRecipes = filteredRecipes.slice(0, filteredRecipes.length-1)
console.log(filteredRecipes)
})
}
function deleteTag() {
const tags = document.querySelectorAll(".tag");
tags.forEach(tag => {
tag.addEventListener("click", () => {
if(tag.classList.contains("tag")) {
//Filter
}
console.log(filteredRecipes)
//Expected output (2 recipes)
})
}) 
}

filter()
deleteTag()

数据 ：

{"recipes": [
{
"id": 1,
"name" : "Limonade de Coco",
"servings" : 1,
"ingredients": [
{
"ingredient" : "Lait de coco",
"quantity" : 400,
"unit" : "ml"
},
{
"ingredient" : "Jus de citron",
"quantity" : 2
},
{
"ingredient" : "Crème de coco",
"quantity" : 2,
"unit" : "cuillères à soupe"
},
{
"ingredient" : "Sucre",
"quantity" : 30,
"unit" : "grammes"
},
{
"ingredient": "Glaçons"
}
],
"time": 10,
"description": "Mettre les glaçons à votre goût dans le blender, ajouter le lait, la crème de coco, le jus de 2 citrons et le sucre. Mixer jusqu'à avoir la consistence désirée",
"appliance": "Blender",
"ustensils": ["cuillère à Soupe", "verres", "presse citron" ]
},
{
"id": 2,
"name" : "Poisson Cru à la tahitienne",
"servings": 2,
"ingredients": [
{
"ingredient" : "Thon Rouge (ou blanc)",
"quantity" : 200,
"unit" : "grammes"
},
{
"ingredient" : "Concombre",
"quantity" : 1
},
{
"ingredient" : "Tomate",
"quantity" : 2
},
{
"ingredient" : "Carotte",
"quantity" : 1
},
{
"ingredient" : "Citron Vert",
"quantity" : 5
},
{
"ingredient" : "Lait de coco",
"quantity" : 100,
"unit" : "ml"
}
],
"time": 60,
"description": "Découper le thon en dés, mettre dans un plat et recouvrir de jus de citron vert (mieux vaut prendre un plat large et peu profond). Laisser reposer au réfrigérateur au moins 2 heures. (Si possible faites-le le soir pour le lendemain. Après avoir laissé mariner le poisson, coupez le concombre en fines rondelles sans la peau et les tomates en prenant soin de retirer les pépins. Rayer la carotte. Ajouter les légumes au poissons avec le citron cette fois ci dans un Saladier. Ajouter le lait de coco. Pour ajouter un peu plus de saveur vous pouver ajouter 1 à 2 cuillères à soupe de Crème de coco",
"appliance": "Saladier",
"ustensils": ["presse citron"]
}
]}

Answer 1

试试这个：

let filteredRecipes = recipes.filter(
recipe => recipe.ingredients.some(
({ingredient}) => ingredient.includes("Jus de citron")
)
);

您无需将项目pushfilteredRecipes。传递给Array.filter()的箭头函数仅要求您返回一个true或false值来指示是否应包含该元素。 如果传递给它的箭头函数返回至少一个数组元素的true，Array.some()将返回true。