'How I can show nested array in DOM?
I´m learning Javascript but I have troubles to show in the DOM the the localstorage. Because I have a nested array of ingredients, I don´t know how to show it :/. I put all the code I have so you can undestand how it works. I want to show all the recipes side by side.
IF you see in the code I push the array "listaingredientes" inside of "recetas".
And I didn´t add the whole code because I could´t,
Thank you in advance
class Ingrediente {
constructor(nombre, cantidad, unidadDeMedida, precio) {
this.nombre = nombre;
this.cantidad = cantidad;
this.unidadDeMedida = unidadDeMedida;
this.precio = precio;
this.precioTotal = this.cantidad * this.precio;
}
};
class Receta {
constructor(nombreReceta, procedimiento, descripcion, ingredientes){
this.id = recetas.length;
this.nombreReceta = nombreReceta;
this.procedimiento = procedimiento;
this.descripcion = descripcion;
this.ingredientes = ingredientes;
}
}
let listaIngredientes = [];
let recetas = [];
formReceta.addEventListener('submit', (e) => {
e.preventDefault()
let padreInputs = document.getElementById('ingredientes');
let cantidadHijos = padreInputs.children.length;
for (let i = 0; i <= cantidadHijos; i++) {
let ingrediente = document.getElementById('ingrediente'+[i]).value
let cantidad = document.getElementById('cantidad'+[i]).value
let medida = document.getElementById('medida'+[i]).value
let precio = document.getElementById('precio'+[i]).value
const ingredienteReceta = new Ingrediente (ingrediente, cantidad, medida, precio);
listaIngredientes.push(ingredienteReceta);
}
let nombreReceta = document.getElementById('nombreReceta').value
let procedimiento = document.getElementById('procedimiento').value
let descripcion = document.getElementById('descripcion').value
let copiaListaingredientes = [...listaIngredientes]
const receta = new Receta (nombreReceta, procedimiento, descripcion,
copiaListaingredientes);
recetas.push(receta)
localStorage.setItem('recetasLocales', JSON.stringify(recetas));
})
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
