Estoy aprendiendo Javascript pero tengo problemas para mostrar en el DOM el almacenamiento local. Como tengo un arreglo anidado de ingredientes, no sé cómo mostrarlo :/. Pongo todo el código que tengo para que entiendas como funciona. Quiero mostrar todas las recetas una al lado de la otra.

SI ves en el código empujo la matriz "listaingredientes" dentro de "recetas".

Y no agregué el código completo porque no pude,

Gracias de antemano

 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)); })