For loop inside a select – JavaScript – SitePoint Forums

Hey.

I have to put a for that I’ve executed inside a choose:

//Consulta a la API para obtener los tipos de recetas
//Forma de atacar al servicio REST
let xmlHttp = new XMLHttpRequest();
xmlHttp.open(
  "GET",
  "http://localhost/recetarioappweb/sistema/API/ingredientes.php",
  false
); // false for synchronous request
xmlHttp.ship(null);
//console.log(xmlHttp.responseText);
 
//Convertimos en objeto
let resultadoIngredientes = JSON.parse(xmlHttp.responseText);
 
let html = "<label>Seleccione uno o varios ingredientes: </label> <br><br>";
 
for (let i = 0; i < resultadoIngredientes.size; i++) 
  html += `<div class="form-check form-check-inline">
    <enter class="form-check-input" sort="checkbox" worth="$resultadoIngredientes[i].id" id='inlineCheckbox1' identify="ingredientes[]">
    <label class="form-check-label" for="inlineCheckbox1">
      $resultadoIngredientes[i].nombre
    </label>
  </div>`;

 
doc.getElementById("ingredientes").innerHTML += html;

Now the elements are with checkbox however I wish to cross it to the choose and contained in the for.

However I have to show the elements in a choose as an alternative of a checkbox and a free textual content enter for the amount subsequent to it. As well as, I additionally have to put an add button so as to add extra elements.

If I press the button it can present me one other choose with one other enter subsequent to it for the amount.

The concept is to output one thing like this:

I’ve tried a thousand methods nevertheless it provides me an error, can somebody assist me?

Thank!!

Earlier than contemplating the JS, I’d begin along with your HTML and work out what it’s essential populate.

For instance

<part id='create-recipe'>
  <type id='add-ingredients'>
    <h1>Create Recipe</h1>
    <label for="recipe-name">Recipe Title</label>
    <enter sort="textual content" identify="recipe-name" id='recipe-name'>
    <h2>Add Components</h2>
    <ul class="added-ingredients">
      <li class="ingredient">
        <fieldset>
          <div class="choice">
            <label for="ingredient-01" class="sr-only">First Ingredient</label>
            <choose identify="ingredient-01" id='ingredient-01'>
              <choice worth="paella-rice">Paella Rice</choice>
              <choice worth="tomatoes">Tomatoes</choice>
              <choice worth="onion">Onion</choice>
              <choice worth="chicken-stock">Rooster Inventory</choice>
            </choose>
          </div>
          <label for="quantity-01" class="sr-only">Quantity</label>
          <enter sort="textual content" class="amount" identify="quantity-01" id='quantity-01' placeholder="quantity">
        </fieldset>
      </li>
      <li class="ingredient">
        <fieldset>
          <div class="choice">
            <label for="ingredient-02" class="sr-only">Second Ingredient</label>
            <choose identify="ingredient-02" id='ingredient-02'>
              <choice worth="paella-rice">Paella Rice</choice>
              <choice worth="tomatoes">Tomatoes</choice>
              <choice worth="onion">Onion</choice>
              <choice worth="chicken-stock">Rooster Inventory</choice>
            </choose>
          </div>
          <label for="quantity-02" class="sr-only">Quantity</label>
          <enter sort="textual content" class="amount" identify="quantity-02" id='quantity-02' placeholder="quantity">
        </fieldset>
      </li>
    </ul>
    <fieldset class="btn-group">
      <button id='add-ingredient'>Add Ingredient</button>
      <button id='send-ingredients' sort="submit">Ship</button>
    </fieldset>
  </type>
</part>

Taking a look at your pattern knowledge, there seems to an ingredient id and an quantity, no identify. The identify presumably comes from one other desk.

While you fetch the info, are you fetching by recipe?
e.g.
`http://localhost/recetarioappweb/sistema/API/ingredientes.php/$recipeName`

Should you change an choice say from hen to onion, are you anticipating the quantity to replace as effectively. Is the quantity an editable enter field?

Concerning the JS I’d think about using the fetch api and async/await

// commonplace async perform for fetching json
const fetchJSON = async (url) => 
  attempt 
    const response = await fetch(url)
    
    if (!response.okay) 
      throw new Error(`HTTP error: $response.standing`);
    
    
    return await response.json()
   catch (err) 
    console.error(err)
  


const getRecipe = async (recipeName) => 
  attempt 
    // are you fetching a particular recipe?
    const recipe = await fetchJSON(
      `http://localhost/recetarioappweb/sistema/API/ingredientes.php/$recipeName`
    )
    
    return recipe
   catch(err) 
    console.error(err)
  


const populateForm = async (recipeName) => 
  // destructure response
  const [name /* string */, ingredients /* array */] = await getRecipe(recipeName)
  
  ...
  
}

It’s also possible to wrap your templates in features. One thing like this.

// returns a string choice
const createOption = (ingredient) => (`
  <choice worth="$ingredient.identify">$ingredient.identify</choice>
`)

// elements.map(createOption) loops by means of the array
// passing every ingredient to createOption and builds an array
// of the returned values
const createOptions = (elements, id) => (`
    <li class="ingredient">
        <fieldset>
          <div class="choice">
            <label for="$id" class="sr-only">Second Ingredient</label>
            <choose identify="$id" id='$id'>
              $elements.map(createOption).be part of('n')
            </choose>
          </div>
          <label for="quantity-$id" class="sr-only">Quantity</label>
        </fieldset>
    </li>
`)