dimanche 13 décembre 2020

If div children don't have same text content then do action

I'm trying to create DOM elements for an Ingredient filter bar, based on JSON file objects.

The problem is that the same ingredient can appear in several objects, and in that case it should only create the dom element once, not for each time the ingredient occures.

I've tried with childNode, value, innerHTML and !=== but can't figure out the solution. It either creates no element at all, or all of them with duplicates.

Any ideas?

Here is a codePen to help : https://codepen.io/enukeron/pen/eYdgyzx

I also tried with an array to keep track of seen values at this 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);
   }
}

The JSON file has this format :

    {
        "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.....

The actual result is : enter image description here

The Expected Result is : enter image description here

Aucun commentaire:

Enregistrer un commentaire