0
217
VistasRender Table without knowing key
I am accessing Airtable API and getting results in the form of JSON like this:-
"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"
},
],
In my UI I want to show the data in the form of a table like it is being displayed in the Airtable. Below is the UI of I want to add data in
My question is what if I want to render the data in the <td></td> tag using react without knowing its key because the key here is the table head name and in my case, I don't know what can be the next table head in Airtable.
1 Respuestas
Responde la pregunta0
You can get keys from object using Object.keys() method,
here is a example:
const sampleData = {
email:"sample@gmail.com",
username:"sample",
name:"John"
}
// this line returns string array contains object's keys
console.log(Object.keys(sampleData))for you problem you can use this approach maybe
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 data
now you need to create table from the data
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>
Using react-flexy-table
another way to create table from unknown keys in react is using react-flexy-table
https://www.npmjs.com/package/react-flexy-table
with this library you can create the table without defining any key
return <ReactFlexyTable data={fields} />
library will handle all key things for you