在 React JS 中解析 JSON 并填充到 Table

Question

我需要将 CSV 文件解析为 JSON 并将其填充到 Table。我使用 PapaParse 将 CSV 解析为 JSON，但 JSON 的某些键之间有一个 space。我需要帮助才能完成后者，但不知道该怎么做。

我的代码是：

<table>
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
            <th scope="col">Column 4</th>
        </tr>
    </thead>
    <tbody>
    {
        this.state.csvdata.map((jsondata, key) => {
            return(
                <tr key={key}>
                    <td>{ jsondata.Column 1 }</td>  //This is where I need help!!
                    .
                    ..
                    ...
                    ....
                    .....
                </tr>
            )
        })
    }
    </tbody>
</table>

JSON的格式是：

[
   {
      Column 1: "Field 1",
      Column 2: "Field 2",
      Column 3: "Field 3",
      Column 4: "Field 4"
   },
   {
      Column 1: "Field 1",
      Column 2: "Field 2",
      Column 3: "Field 3",
      Column 4: "Field 4"
   },
   {
      Column 1: "Field 1",
      Column 2: "Field 2",
      Column 3: "Field 3",
      Column 4: "Field 4",
   }
]

Answer 1

您需要在 json 中的键周围加上引号：

"Column 1": "Field 1", 
...

然后你可以这样访问它：

<td>{ jsondata["Column 1"] }</td>

在 React JS 中解析 JSON 并填充到 Table

Parse a JSON and Populate into a Table in React JS

json

reactjs

node-csv-parse