Estoy tratando de construir una tabla a partir de un archivo JSON usando el mapa en reaccionar, lo intenté de dos maneras, la primera usando el mapa y la segunda usando un bucle for, pero no obtuve nada.
Agradezco una solución basada en ES6.
mapa:
const META = [ { "name": "CeloPunks Celo Connect Edition #377", "image": "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png", "edition": 377 } ]; const Data = META.map(vardata = () => { return ( <div> <td>{vardata}</td> </div> ) }); console.log(Data);en bucle:
const DataAll = []; for (let i=0; i<=META.lenght; i++){ DataAll.push(META[i]); }; console.log(DataAll);¿Cómo crear una tabla a partir de un archivo JSON como META usando javascript moderno?
es posible que desee algo como esto:
const Table = () => { const META = [ { name: "CeloPunks Celo Connect Edition #377", image: "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png", edition: 377, }, ]; return ( <table> <thead> <tr> <th>Name</th> <th>Image</th> <th>Edition</th> </tr> </thead> <tbody> {META.map(({ name, image, edition }) => ( <tr key={name}> <td>{name}</td> <td>{image}</td> <td>{edition}</td> </tr> ))} </tbody> </table> ); }; export default Table;Esta es solo una tabla con una línea y un encabezado, pero si cambia su variable META, recorrerá la matriz para mostrar cada línea... Por ejemplo, con esta matriz:
const META = [ { name: "First Edition #1", image: "https://first-link", edition: 1, }, { name: "Second Edition #2", image: "https://second-link", edition: 2, }, { name: "Third Edition #3", image: "https://third-link", edition: 3, }, ];Creo que te gusta esto a continuación:
const Table = () => { const META = [ { name: "CeloPunks Celo Connect Edition #377", image: "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png", edition: 377, }, { name: "CeloPunks Celo Connect Edition #378", image: "https://pbs.twimg.com/profile_images/1440251297538527243/XQLuZvwr_400x400.png", edition: 378, }, { name: "CeloPunks Celo Connect Edition #379", image: "https://cdn.cyberbox.art/cpunk/14.png", edition: 379, }, ]; return ( <table style={{width:'100%'}}> <thead> <tr> <th>Name</th> <th>Image</th> <th>Edition</th> </tr> </thead> <tbody> {META.map(item => ( <tr key={name}> <td>{item.name}</td> <td><img src={item.image} /></td> <td>{item.edition}</td> </tr> ))} </tbody> </table> ); }; ReactDOM.render(<Table />, document.getElementById('root')) img{ width: 100px; } table, th, td { border:1px solid black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root'></div>