0
225
VistasRenderizar tabla sin conocer la clave
Estoy accediendo a la API de Airtable y obtengo resultados en forma de JSON como este:-
"records": [ { "id": "recNwEP0MIWVXfYPk", "fields": { "Email": "mohit@gmail.com", "Department": "Dev", "Date of Joining": "2020-06-01", "First Name": "Mohit", "Salary": 700, "Last Name": "Chandani" }, "createdTime": "2021-09-13T12:35:12.000Z" }, ], En mi interfaz de usuario, quiero mostrar los datos en forma de tabla como si se estuvieran mostrando en Airtable. A continuación se muestra la interfaz de usuario de Quiero agregar datos en 
Mi pregunta es si quiero representar los datos en la etiqueta <td></td> usando reaccionar sin saber su clave porque la clave aquí es el nombre del encabezado de la tabla y en mi caso, no sé cuál puede ser el siguiente cabeza de mesa en Airtable.
1 Respuestas
Responde la pregunta0
Puede obtener claves de un objeto usando el método Object.keys(),
aquí hay un ejemplo:
const sampleData = { email:"sample@gmail.com", username:"sample", name:"John" } // this line returns string array contains object's keys console.log(Object.keys(sampleData))para su problema, puede usar este enfoque tal vez
const records= [ { "id": "recNwEP0MIWVXfYPk", "fields": { "Email": "mohit@gmail.com", "Department": "Dev", "Date of Joining": "2020-06-01", "First Name": "Mohit", "Salary": 700, "Last Name": "Chandani" }, "createdTime": "2021-09-13T12:35:12.000Z" }, { "id": "recNwEP0MIWVXfYPk", "fields": { "Email": "mohit@gmail.com", "Department": "Dev", "Date of Joining": "2020-06-01", "First Name": "Mohit", "Salary": 700, "Last Name": "Chandani" }, "createdTime": "2021-09-13T12:35:12.000Z" } ] // get all fields in reconds array const fields = records.map(record => record.fields); console.log(fields) // get one fields key using Object.keys() const fieldKeys = Object.keys(fields[0]) console.log(fieldKeys) // now you need to return dataahora necesitas crear una tabla a partir de los datos
return <table> { // create td elements from fieldsKeys fieldKeys.map(field => <td>{field}</td>) } { // now create tr for each field fields.map(field => <tr> { // add td for every key in fieldKeys fieldKeys.map(key => <td>{field[key]}</td>) } </tr> ) } </table>Usando reaccionar-flexy-tabla
otra forma de crear una tabla a partir de claves desconocidas en react es usando react-flexy-table
https://www.npmjs.com/package/react-flexy-table
con esta biblioteca puedes crear la tabla sin definir ninguna clave
return <ReactFlexyTable data={fields} />biblioteca se encargará de todas las cosas clave para usted