时间戳

首页 > 解决方案 > 如果 div 子项没有相同的文本内容，则执行操作

javascript - 如果 div 子项没有相同的文本内容，则执行操作

问题描述

我正在尝试基于 JSON 文件对象为成分过滤器栏创建 DOM 元素。

问题是相同的成分可以出现在多个对象中，在这种情况下，它应该只创建一次 dom 元素，而不是每次出现成分时。

我已经尝试过childNode, value，innerHTML 但!===无法找出解决方案。它要么根本不创建任何元素，要么所有元素都具有重复项。

有任何想法吗？

这是一个可以提供帮助的 codePen：https ://codepen.io/enukeron/pen/eYdgyzx

我还尝试使用一个数组来跟踪此 codepen 上看到的值： https ://codepen.io/enukeron/pen/ExgZoLa

JS：

const ingredientDropdown = document.getElementById('ingredientDropdown');

for(var j = 0; j < IngredientList.length; j++) {
   if (ingredientDropdown.children.textContent !== IngredientList[j].ingredient) {
      var ingredientSearchItems = document.createElement("p");
      ingredientSearchItems.textContent = IngredientList[j].ingredient;
      ingredientDropdown.appendChild(ingredientSearchItems);
   }
}

JSON 文件具有以下格式：

    {
        "id": 49,
        "name": "Tropical smoothie",
        "servings": 4,
        "ingredients": [
            {
                "ingredient": "Bananas",
                "quantity": 2
            },
            {
                "ingredient": "Kiwis",
                "quantity": 3
            },
            {
                "ingredient": "Mango",
                "quantity": 1
            },
            {
                "ingredient": "Pineapple",
                "quantity": 4,
                "unit":"slices"
            },
            {
                "ingredient": "Honey",
                "quantity": 2,
                "unit": "tablespoons"
            }
        ],
        "time": 0,
        "description":"Chop the fruit. Liquefy in the blender. Chill. Serve",
        "appliance": "Blender",
        "ustensils":["couteau", "verres"]
    }, etc.....

实际结果是：在此处输入图像描述

预期结果是：在此处输入图像描述

标签： javascriptjsonfor-loopif-statementdom

解决方案

您可以创建如下函数：

function filterIngredients(recipes){
  let return_arr = [];
  recipes.forEach((recipe, index, array)=>{
    let ingredients = recipe["ingredients"];
    ingredients.forEach((ingredient, index, inner_array)=>{
      if(!return_arr.includes(ingredient["ingredient"])){
        return_arr.push(ingredient["ingredient"]);
      }
    });
  });
  return return_arr;
}

然后调用函数如下：

var ingredients = filterIngredients(recipes);

然后，您可以根据需要循环ingredients并在 div 中显示它们（希望这是您首先想要的）。这是我实现它的笔的链接： https ://codepen.io/AnirudhMS/pen/MWjJQgg?editors=1010

推荐阅读