在不知道密钥的情况下渲染 Table

Question

我正在访问 Airtable API 并以 JSON 的形式获得结果，如下所示：-

"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"
        },
    ],

在我的 UI 中，我想以 table 的形式显示数据，就像在 Airtable 中显示的那样。下面是我要添加数据的UI

我的问题是，如果我想在不知道其密钥的情况下使用 React 呈现 <td></td> 标记中的数据怎么办，因为这里的密钥是 table 头名，在我的例子中，我不知道'知道下一个 table 头像可以是 Airtable.

Answer 1

您可以使用 Object.keys() 方法从对象中获取键，

这里有一个例子：

const sampleData = {
email:"sample@gmail.com",
username:"sample",
name:"John"
}

// this line returns string array contains object's keys
console.log(Object.keys(sampleData))

对于你的问题，你可以使用这种方法

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

现在您需要从数据

创建table

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>

使用react-flexy-table

在 React 中从未知键创建 table 的另一种方法是使用 react-flexy-table

https://www.npmjs.com/package/react-flexy-table

使用此库，您可以创建 table 而无需定义任何键

return <ReactFlexyTable data={fields} />

图书馆将为您处理所有重要的事情

在不知道密钥的情况下渲染 Table

Render Table without knowing key

javascript

reactjs

airtable