Entonces, estoy tratando de mostrar datos JSON en mi proyecto React.js, pero recibo un error que no puedo resolver. Pasé 2 días tratando de resolverlo, pero no tuve suerte.
Los datos JSON: (nombre de archivo: productos.json)
{ "product-1": [ { "id": 1, "name": "product-1", } ], "product-2": [ { "id": 2, "name": "product-2", } ], "product-3": [ { "id": 3, "name": "product-3", } ] }Mi javascript:
const productsData = Object.keys(backendData).map(key => { return { [key]: backendData[key] } }) console.log(productsData[0].products["product-1"][0].id)Porque productsData le devolverá una matriz como esta:
[ { "product-1": [ { "id": 1, "name": "product-1", } ]}, {"product-2": [ { "id": 2, "name": "product-2", } ]}, .... ]Lo que significa que esto es una matriz de objetos, donde cada objeto tiene un par clave-valor, donde la clave es el nombre y el valor es una matriz. Si desea acceder a la identificación, debe hacer lo siguiente:
productsData[0]["product-1"][0].idACTUALIZADO DESPUÉS DE LA ACTUALIZACIÓN DE OP
Dado que su valor backendData no coincide con product.json, ignoraré ese product.json y le escribiré la solución que funcionará para el valor de backendData que acaba de proporcionar.
const productsData = backendData.products; const id = productsData[0]["product-1"][0].id;