Tengo 2 arreglos de ingredientes y medidas en mi objeto margaritas y estoy tratando de representar una lista de ingredientes en el dom donde ingredientes[0] es un ingrediente y medidas[0] es la medida del ingrediente, y así sucesivamente. No puedo entender cómo hacer que esto funcione y me pregunto si tal vez necesito reestructurar mi código o si estoy cometiendo un error en alguna parte.
El código está aquí en: https://jsfiddle.net/morjman/m4ucy0t7/3/
Cuando traté de hacerlo, creé una función renderIngredients que toma 2 matrices y un elemento principal, pero creo que eso también está mal
¿Por qué no usar una buena iteración de matriz antigua regular? Suponiendo que los ingredientes y las medidas tengan los mismos elementos de matriz, puede hacer algo como esto,
for(let i = 0; i< measures.length; i++){ //Do stuff on ingredients[i]; //Do some other stuff with measures[i]; }Asegúrese de que tengan la misma cantidad de elementos o, de lo contrario, terminará apuntando a nulo.
Como alguien más mencionó, puede usar un ciclo for:
let numIngredients = margarita.ingredients.length; let strIngredients = ''; for(let i = 0; i < numIngredients; i++) { let ing = margarita.ingredients[i] || ''; let meas = margarita.measures[i] || ''; strIngredients += '<li>' + ing + " " + meas + '</li>' } const html = ` <div class="margarita-details"> <h2><span>${margarita.id}</span> ${margarita.name}</h2> <ul>${strIngredients}</ul> <img src="${margarita.img}" alt="${margarita.imgAlt}" /> <p class="instructions">${margarita.instructions}</p> <p class="">${margarita.isAlcoholic ? "Contains Alcohol!!" : ""}</p> </div> `;hay dos maneras de hacer esto. Pero para ambos métodos, las matrices deben tener la misma longitud.
El primer método es la forma más clásica.
for(let i = 0; i< measures.length; i++){ ingred = ingredients[i] measure = measures[i] // do something }La segunda forma de hacerlo es comprimir primero ambas matrices y luego iterar.
var zipped = ingredients.map(function(e, i) { return [e, measures[i]]; }); // zipped = [[ingred1,mes1],[ingred2,mes2],[ingred3,mes3],.....] // Then iterate through the zipped arrayY hay varios otros métodos para comprimir arreglos en js. referir esto