解析JSON并填充到React JS中的表中

Posted 2021-05-03

我需要将CSV文件解析为JSON，然后将其填充到表格中。我使用PapaParse将CSV解析为JSON，但是JSON的某些键之间有一个空格。我需要帮助才能完成后者，却不知道该怎么办。

我的代码是：

<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",
   }
]

答案

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

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

然后您可以像这样访问它：

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