在 json 数据中没有正确键值的情况下在反应 js 中制作 table

Question

我正在从 API 获取数据，但它没有正确的键值，headers 无法使用 react-table。我不确定如何使用数据

生成 table

{
  "result": {
    "DB04571": {
      "CC1=CC2": -4.204354763031006
    },
    "DB00855": {
      "NCC(=O)": -3.666783332824707
    },
    "DB09536": {
      "O=[Ti]": -3.1173958778381348
    }
}}

以上是1000条数据的样本。下面是我期望 table 的图片。因为我没有 json 输出的 headers，所以我无法将它们存储为 table，因为值不断变化。在使用 react-table 时，我应该提到 headers 但我无法提取数据，因为药物名称在数据中不断变化，而且它们没有附加密钥。

Answer 1

具有显式变量名：

Object.keys(data.result).map(( drug ) => {
    const drugData = data.result[ drug ];
    const molecule = Object.keys(drugData)[ 0 ];
    const prediction = drugData[ molecule ];
    /* More code */
});

Answer 2

要使用 react-table 进行渲染，您需要将对象转换为对象数组：

const normalizeData = (data) =>
    Object.keys(data).map((key) => ({
      drug: key,
      molecule: Object.keys(data[key]),
      prediction: Object.values(data[key])
    }));

规范化函数 return 可以使用 react-table 渲染对象数组：

[{"drug":"DB04571","molecule":["CC1=CC2"],"prediction":[-4.204354763031006]}, ...]

反应组件：


const MyPage = () => {
  const columns = [{ accessor: "drug" }, { accessor: "molecule" },{ accessor: "prediction" }];

  const data = {
    result: {
      DB04571: {
        "CC1=CC2": -4.204354763031006
      },
      DB00855: {
        "NCC(=O)": -3.666783332824707
      },
      DB09536: {
        "O=[Ti]": -3.1173958778381348
      }
    }
  };

  const normalizeData = (data) =>
    Object.keys(data).map((key) => ({
      drug: key,
      molecule: Object.keys(data[key]),
      prediction: Object.values(data[key])
    }));

return <Table columns={columns} data={normalizeData(data.result)} />
}

这是一个活生生的例子：

在 json 数据中没有正确键值的情况下在反应 js 中制作 table

Making a table in react js without proper key values in json data

javascript

reactjs

json

dictionary

react-table