He creado un punto final que devuelve todos los productos en formato JSON. Estoy tratando de mostrar los datos de cada producto en mi página index.html. Pero parece que no puedo obtener los datos correctos con Axios, esta es la primera vez que uso axios, así que por favor, tenga paciencia conmigo.

El punto final/ruta /api/products/getAllProducts devuelve el siguiente JSON

 { "message": "Fetched products..", "data": [ { "Product_ID": "017c24f4-8bd6-4bfc-a93e-f6f5d2426f6f", "Product_title": "PC", "Product_desc": "PC", "Product_price": 1000, "Product_picture": null, "Product_color": "Blue", "Product_location": 2150, "Product_category": "Clothes", "Product_created": "2022-04-13T00:00:00.000Z" }, { "Product_ID": "1", "Product_title": "fisk", "Product_desc": "fisk med skind", "Product_price": 100, "Product_picture": null, "Product_color": "grøn", "Product_location": 2100, "Product_category": "mad", "Product_created": "2022-04-13T00:00:00.000Z" } ] }

Mi código hasta ahora devuelve el siguiente error

TypeError: products.map no es una función en showProducts (index.js:9:34)

Este es mi código: entiendo que, dado que no obtengo los datos correctos, no puedo usar la propiedad .map, pero no puedo descifrar qué me falta para obtener los datos correctamente.

 const productsDOM = document.querySelector(".productsDOM"); const showProducts = async () => { try { const { data: products } = await axios.get( "http://localhost:3000/api/products/getAllProducts" ); const allProducts = products.map((product) => { return `<h1>${Product_title}</h1>` }) productsDOM.innerHTML = allProducts } catch (error) { console.log(error); } }; showProducts();

¡Gracias de antemano!