如何在 UI 中将 JSON 数据呈现为字段答案

【问题标题】：How to render JSON data as fields in the UI如何在 UI 中将 JSON 数据呈现为字段
【发布时间】：2022-02-10 06:18:12
【问题描述】：

我在表格中有一个 json 数据元素

<Table responsive>
 <thead>
  <tr>
   <th className="hand" onClick={sort('serialized')}>
    <Translate contentKey="waTpaApp.tpaAssessment.serialized">Serialized</Translate> 
   </th>
  </tr>
 </thead>
<tbody>
 <tr>
  <td>{assessment.serialized}</td>
 </tr>
</tbody>
</Table>

JSON 显示在名为“Serialized”的列中。

部分数据如下（格式化后）

{
  "app": {
    "determination": {
      "home": {
        "title": "Determinations",
        "createLabel": "Create a new Determination",
        "createOrEditLabel": "Create or edit a Determination",
        "search": "Search for Determination",
        "notFound": "No Determinations found"
      },
    }
   }
}

我想以易于阅读的方式显示数据，例如

<Row>
<Col sm="4">
{title}
</Col>
<Col sm="4">
{createLabel}
</Col>
<Col sm="4">
{createOrEditLabel}
</Col>
</Row>

或者更简单

标题——创建标签——创建或编辑标签

【问题讨论】：

标签： javascript html reactjs json tsx

【解决方案1】：

我添加了一些 javascript 代码来解析数据

const data = JSON.parse(assessmentEntity.serialized);

并且能够访问它例如

<Row>
{data.app.determination.home.title}
</Row>

但是，当我解析数据时出现错误，我认为这是因为浏览器在解析之前需要更多时间来加载元素。

SyntaxError: JSON Parse error: Unexpected identifier "undefined"

当我控制台记录数据时，它看起来很好

【讨论】：