Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

})

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda