从不同的文件中获取所有JSON头

Question

我正在React中使用Hooks制作一个程序，该程序需要读取CSV文件并将其转换为JSON，然后我想从该文件创建一个表，但该文件可能会随着每个属性的变量和标题(列名(而更改。

如何根据文件获取标题，以便根据文件而不是代码自动创建表？

对于CSV到JSON，我使用react-papaparse，并尝试创建一个基本表来使用React预览数据。

CSVReader

<CSVReader
onDrop={handleOnDrop}
onError={handleOnError}
addRemoveButton
onRemoveFile={handleOnRemoveFile}
config={{ header: true }}
>
<span>Drop CSV file here or click to upload.</span>
</CSVReader>

然后我使用Hooks 将数据分配给状态

const handleOnDrop = (data) => {
console.log("---------------");
console.log(data);
setFileData(data);
console.log("---------------");
};

问题是，查看每个数据的唯一方法是代码：

<div>
{fileData.map((data, index) => (
<li key={index}>{data.data.ASEG_LeftLateralVentricle}</li>
))}
</div>

在一些文件中，ASEG_LeftLateralVentricle没有这个名称，但我也想显示第1、2、…列的信息。。。

一切都应该在前端完成

Answer 1

我获取JSON文件所有头的方法是使用以下方法：

const getKeys = (data) => {
let arr = [];
if (data) {
Object.keys(data).map((key) => {
arr = Object.keys(data[key].data);
});
}
return arr;
};