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

Question

我正在使用 Hooks 在 React 中制作一个程序，需要读取 CSV 文件并将其转换为 JSON，然后我想从该文件创建一个 table，但是文件变量和每个属性的 headers（列名）也可能会发生变化。

如何根据文件获取 headers，然后根据文件而不是代码自动创建 table？

对于 JSON 的 CSV，我使用 react-papaparse，并且我正在尝试创建一个基本 table 以使用 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 文件的所有 headers 的方法是使用以下方法：

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

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

Get all JSON headers from different files

json

fetch

reactjs

papaparse

react-hooks