时间戳

首页 > 解决方案 > 从不同文件中获取所有 JSON 标头

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

问题描述

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

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

对于我使用的 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、... 列的信息

一切都应该在前端完成。

标签： jsonreactjsreact-hooksfetchpapaparse

解决方案

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

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

推荐阅读