Search code examples
javascriptreactjsairtable

Render 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 enter image description here

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:"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