Array question

[cowboysdude]

Currently I have an array that looks like this:

ingredients: [
{ingredient: 1/2 cup milk},
{ingredient: 1 cup of stuff},
{ingredient: 1 pinch of this}
]

I think I’ve tried everything I can honestly think of but no go…

Currently I’m looping the array and displaying it but I would like to be able to put it in a button so it
pops up rather then already displaying…

If I try to make a button right now if there’s 10 ingredients I get 10 buttons… that’s not the goal here

I would really appreciate any help here!

Thanks!

[astonecipher]

So, what is the goal? How should it work?

[JimL]

I assume you mean something like this
https://jsfiddle.net/2spe18bt/

Then it’s just to adjust it to however you use it.

If you already depend on jquery you can simplify the toggle and append functions.

If you want the list to slide up/down you can just add some css

If you want the list in a modal then show a modal and display the ingredients in it.

etc

const button = document.querySelector('button'),
      list = document.querySelector('ul')
      
button.addEventListener('click', toggleList)

function toggleList() {
  const listIsDisplayed = window.getComputedStyle(list).display === 'block'
  
  list.style.display = listIsDisplayed ? 'none' : 'block'
}
      
const recipe = {
  name: 'Something good',
  ingredients: [
    { ingredient: '1/2 cup milk' },
    { ingredient: '1 cup of stuff' },
    { ingredient: '1 pinch of this' }
  ]
}

document.querySelector('h1').innerHTML = recipe.name

recipe.ingredients.forEach((ingredient) => {
  var ingredientElement = document.createElement('li');
  ingredientElement.innerHTML = ingredient.ingredient;
  list.appendChild(ingredientElement)
})
</script>

[cowboysdude]

This is my current structure:

var ingred = document.createElement("ul");
      ingred.classList.add("flex-item", "ingreid");
      for (i = 0; i < list.length; i++) { 
      ingred.innerHTML += `<li>${list[i].ingredient}</li>`
      }
      wrapper.appendChild(ingred);

      return wrapper;

So I will have to make some adjustments

Thank you!!

Hope the Holidays were good to you and the family!!