Tengo un objeto JSON que estoy tratando de analizar en una tabla usando React, sin embargo, tengo problemas para usar .map() para intentar crear una fila para cada combinación única de código de curso, name , transferable_credits , transferable_credits -> institution , transferable_credits -> name y url . Parece que no puedo entender cómo obtener los valores clave de las matrices anidadas dentro de cada par clave-valor raíz JSON.
Mi componente React hasta ahora:
import data from './data.json' const Home = () => { return ( <div className="home"> <table> <thead> <tr> <th>Course Code</th> <th>Vendor Institution</th> <th>Vendor Course</th> </tr> </thead> <tbody> {Object.keys(data).map(function(key, index) { return ( <tr key={index}> <td>{key}</td> {Object.keys(data[key].transferable_credits).forEach(function(key2) { return ( <td>{key2.institution}</td> ) })} </tr> )}) } </tbody> </table> </div> ); } export default Home;data[key].transferable_credits es una lista, por lo que debe hacer un bucle usando map, no Object.keys. Prueba esto
import data from './data.json' const Home = () => { return ( <div className="home"> <table> <thead> <tr> <th>Course Code</th> <th>Vendor Institution</th> <th>Vendor Course</th> </tr> </thead> <tbody> {Object.keys(data).map(function(key, index) { return ( <tr key={index}> <td>{key}</td> {data[key].transferable_credits.map(function(key2) { return ( <td>{key2.institution}</td> ) })} </tr> )}) } </tbody> </table> </div> ); } export default Home;