Render Table without knowing key

Issue

I am accessing Airtable API and getting results in the form of JSON like this:-

"records": [
        {
            "id": "recNwEP0MIWVXfYPk",
            "fields": {
                "Email": "[email protected]",
                "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.

Solution

You can get keys from object using Object.keys() method,

here is a example:

const sampleData = {
email:"[email protected]",
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": "[email protected]",
                "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": "[email protected]",
                "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

Answered By – hasankzl

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0