在不知道密钥的情况下渲染表答案

【问题标题】：Render Table without knowing key在不知道密钥的情况下渲染表
【发布时间】：2021-11-14 04:44:36
【问题描述】：

我正在访问 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 中，我想以表格的形式显示数据，就像它在 Airtable 中显示一样。下面是我想在其中添加数据的 UI

我的问题是，如果我想在不知道其键的情况下使用 react 渲染 <td></td> 标记中的数据怎么办，因为这里的键是表头名称，在我的情况下，我不知道下一个会是什么Airtable 中的表头。

【问题讨论】：

使用 object["key name"] 渲染动态键
您可以使用Object.keys() 循环对象键，它返回一个名称数组。可以使用Object.entries() 循环整个对象。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
能否添加示例代码？这个问题有点不清楚。

标签： javascript reactjs airtable

【解决方案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

现在您需要根据数据创建表

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 中从未知键创建表的另一种方法是使用 react-flexy-table

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

使用这个库，您可以在不定义任何键的情况下创建表

return <ReactFlexyTable data={fields} />

图书馆会为你处理所有关键的事情

【讨论】：