Estoy haciendo una aplicación usando React JS. Básicamente se supone que debe obtener contenido JSON y mostrarlo en la pantalla. Sé que se supone que esto es algo realmente simple, pero simplemente no puedo implementarlo. Mire mi código y muestre una forma de importar y mostrar este JSON en mi React. ¡¡Gracias!!
JSON
[ { "id": "1", "title": "Test", "firstName": "Testing", "lastName": "Thingy", "salary": 5000 }, { "id": "2", "title": "Test", "firstName": "Test", "lastName": "Thing", "salary": 6000 } ]Reaccionar código JS en un ejemplo mínimo reproducible -
import thing from "./card.json"; const item = JSON.stringify(thing[0][1]); const item2 = JSON.stringify(thing[1]); const ProductCard = ({ data }) => { return ( <div> <h1>{item}</h1> <h1>{item2}</h1> </div> ); }; export default ProductCard;Si todos los objetos en JSON son iguales, puede usar la función de map . Podría parecerse a algo.
import thing from "./card.json"; const ProductCard = ({ data }) => { return ( <div> {data.map(jsonObject => { return( <div> <h1>{jsonObject.title}</h1> <p>{jsonObject.id}</p> <p>{jsonObject.firstName}</p> <p>{jsonObject.lastName}</p> <p>{jsonObject.salary}</p> </div> ) }) } </div> ); }; export default ProductCard;Oye, el formato anterior de JSON es un objeto dentro de una matriz, por lo que podemos acceder al elemento de la matriz usando cosas [0], pero para el objeto necesitamos proporcionar la clave. En lo anterior, no necesita Stringificar el JSON.
import thing from "./card.json"; const item = thing[0].id; const item2 = thing[1].title; const ProductCard = ({ data }) => { return ( <div> <h1>{item}</h1> <h1>{item2}</h1> </div> ); }; export default ProductCard;si desea obtener el valor de un campo, use este código:
const item = data[0].id;pero si desea leer todos los objetos como una cadena, use esta muestra:
const item2 = JSON.stringify(data[1]);