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 :

The Expected Result is :

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);