0

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.

3
  • 1
    fetch devuelve una promise, lo que es sinónimo de que sucede una llamada asincononica. Para obtener misProductos con datos tenes que esperar o suscribirte a la promise, no podes hacer console.log inmédiatamente después.
    – Marcos
    el 16 jun. a las 14:56
  • De paso, te recomiendo leer: ¿Qué diferencias hay entre callbacks, promises y async/await?
    – Marcos
    el 16 jun. a las 15:00
  • Hola, muchas gracias por el aporte, me resultado muy valioso. Saludos el 17 jun. a las 20:01

0

Examina otras preguntas con la etiqueta o formula tu propia pregunta.