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

Question

我正在使用 Hooks 在 React 中制作一个程序，该程序需要读取 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;
  };