necesito ayuda para resolver el siguiente problema. Estoy haciendo un pequeño programa en JavaScript y no logro completarlo. La idea es, a partir de un archivo Json, crear un array de objetos para luego ser utilizados en la construcción de una página web. Les muestro el código que estoy utilizando y luego les comento lo que no está funcionando.
class Producto {
constructor(id, nombre, descripcion, precio, imagen, categoria){
this.id = id;
this.nombre = nombre;
this.descripcion = descripcion;
this.precio = precio;
this.imagen = imagen;
this.categoria = categoria;
}
}
//Variable donde se guarda el catalogo de productos
let catalogo;
//Array productos donde se almacenará cada producto.
let misProductos = [];
//Llamo al JSON
fetch("data.json").then(response => response.json()).then(data => {
//Datos se almacenan en variable catalogo.
catalogo = data;
//Recorro catalogo
catalogo.forEach(productoData => {
const id = productoData.id;
const nombre = productoData.nombre;
const descripcion = productoData.descripcion;
const precio = productoData.precio;
const imagen = productoData.imagen;
const categoria = productoData.categoria;
//Creo instancia de producto
const producto = new Producto(id, nombre, descripcion, precio, imagen, categoria);
//Agrego producto al array productos
misProductos.push(producto);
})
});
console.log(misProductos.length)
Todo este código se ejecuta bien, pero no logro acceder al array misProductos, es mas, la última línea, y a título de prueba, la puse para ver la longitud de array creado arriba y me devuelve cero. Cabe destacar que el json contiene elementos, ahora se los muestro:
[
{
"id": 1,
"nombre": "Trombón Yamaha YSL-154",
"descripcion": "Trombon Tenor profesional de vara",
"precio": 447.912,
"imagen": "trombon_yamaha.jpg",
"categoria": "Trombones"
},
{
"id": 2,
"nombre": "Trombón B&S Stolzing BSMS14",
"descripcion": "Trombón profesional. Calibre: 11,66mm/0.459″. Campana: 122mm/4,782",
"precio": 186.297,
"imagen": "trombon_BS.jpg",
"categoria": "Trombones"
},
{
"id": 3,
"nombre": "Trompeta GALA WINDS PTR1100",
"descripcion": "Trompeta plástica de estudio. Incluye soporte plegable.",
"precio": 778.435,
"imagen": "trompeta_GALA.jpg",
"categoria": "Trompetas"
},
{
"id": 4,
"nombre": "Trompeta B&S BS3137",
"descripcion": "Trompeta profesional. Calibre: 13,89mm/0.547″. Campana: 216mm/8 1/2″. Campana y curvas de bronce",
"precio": 778.435,
"imagen": "trompeta_BS.jpg",
"categoria": "Trompetas"
},
{
"id": 5,
"nombre": "Flauta STAGG WSFL251S",
"descripcion": "Flauta traversa C-17 llaves abiertas/sol en linea. Con estuche.",
"precio": 108.724,
"imagen": "flauta_stagg.png",
"categoria": "Flautas"
},
{
"id": 6,
"nombre": "Flauta Clef Premium CFLTA",
"descripcion": "Traversa, plateada Abierta al do grave mi/partido.",
"precio": 110.501,
"imagen": "flauta_clef.jpg",
"categoria": "Flautas"
}
]
Bueno, espero me puedan ayudar, gracias y saludos.
fetch
devuelve unapromise
, lo que es sinónimo de que sucede una llamada asincononica. Para obtenermisProductos
con datos tenes que esperar o suscribirte a lapromise
, no podes hacerconsole.log
inmédiatamente después.