Javascript，将复选框与 JSON 匹配

Question

我有:

• 一些复选框
• 提交按钮
• 一个 JSON 字符串对象。
• 一个函数，用于检查哪些复选框被选中，并在警报或 console.log 中返回它们的值，并在我的提交按钮上使用 evenlistener。
• 一个输出DIV

我如何比较我从检查哪些复选框被选中的函数中获得的值与 JSON 字符串对象中的值，并将它们回显到输出 DIV 中？假设我选中了“奶酪”和“大蒜”框，并期望收到以下输出:

• 食谱 1:奶酪、番茄、大蒜
• 食谱 2:奶酪、土 bean 、蛋黄酱、牛肉、大蒜、黄油

HTML:

<form action="" method="">
    <input type="checkbox" value="Cheese">Cheese<br>
    <input type="checkbox" value="Tomato">Tomato<br>
    <input type="checkbox" value="Garlic">Garlic<br>
    <input type="checkbox" value="Bacon">Bacon<br>
    <input type="checkbox" value="Paprika">Paprika<br>
    <input type="checkbox" value="Onion">Onion<br>
    <input type="checkbox" value="Potato">Potato<br>
    <input type="checkbox" value="Mayo">Mayo<br>
    <input type="checkbox" value="Beef">Beef<br>
    <input type="checkbox" value="Garlic">Garlic<br>
    <input type="checkbox" value="Butter">Butter<br>

    <input type="button" value="Get recipes" id="getRecipesButton">
</form>

<div id="output">The results end up here</div>

JS:

//Recipes JSON-string:
var recipes = [
    {
        name:"recipe1",
        ingredients:
            [
                {ingredient:"Cheese"},
                {ingredient:"Tomato"},
                {ingredient:"Garlic"}
            ]
    },
    {
        name:"recipe2",
        ingredients:
            [
                {ingredient:"Cheese"},
                {ingredient:"Bacon"},
                {ingredient:"Paprika"},
                {ingredient:"Onion"}
            ]
    },
    {
        name:"recipe3",
        ingredients:
            [
                {ingredient:"Cheese"},
                {ingredient:"Potato"},
                {ingredient:"Mayo"},
                {ingredient:"Beef"},
                {ingredient:"Garlic"},
                {ingredient:"Butter"}
            ]
    }
];
//Test to retrieve single, specific entries: 
//      console.log(recipes[1].ingredients[0].ingredient);


//Test to get/return the checked values of the checkboxes:
function selectedBoxes(form) {
    let selectedBoxesArr = [];
    let inputFields = form.getElementsByTagName('input');
    let inputFieldsNumber = inputFields.length;

    for(let i=0; i<inputFieldsNumber; i++) {
        if(
            inputFields[i].type == 'checkbox' &&
            inputFields[i].checked == true
        ) selectedBoxesArr.push(inputFields[i].value);
    }
    return selectedBoxesArr;
}

var getRecipesButton = document.getElementById('getRecipesButton');
getRecipesButton.addEventListener("click", function(){
    let selectedCheckBoxes = selectedBoxes(this.form);
    alert(selectedCheckBoxes);
});

>>Fiddle

Answer 1

您可以将您的食谱数组过滤为仅包含所有选定成分的食谱，如下所示:

let filtered = recipes.filter((recipe) => {
    return selectedCheckBoxes.every((selected) => {
        return recipe.ingredients.some((ingredient) => {
            return ingredient['ingredient'] === selected;
        });
    });
});

因此，对于每个食谱，我们都会检查该食谱中是否包含每种选定的成分。在这种情况下:

• filter(): 过滤掉任何不包含所有选定成分的食谱；
• every(): 检查每个选择的成分是否在当前由 filter() 评估的配方中；
• some(): 检查食谱中的某些成分是否等于 every() 评估的当前选择的成分。

我编辑了你的 fiddle ，所以你可以看到它在工作:https://jsfiddle.net/byce6vwu/1/

编辑

您可以像这样将返回的数组转换为 html(我还将输出 div 更改为 ul:

let outputRecipes = '';
  filtered.forEach((recipe) => {
    let stringIngredients = recipe.ingredients.map((val) => {
        return val.ingredient;
    }).join(',');
        outputRecipes += `<li>${recipe.name}: ${stringIngredients}</li>`;
  });
    document.getElementById('output').innerHTML = outputRecipes;

我编辑了 fiddle :https://jsfiddle.net/ys0qofgm/

因此，对于数组中的每种成分，我们将成分对象:{ingredient: "Cheese"} 转换为一个字符串 "Cheese" 并将所有使用逗号作为分隔符的数组元素。然后为每个食谱创建一个 li 元素，并将食谱字符串放入其中。