'How to render JSON data as fields in the UI

I have a json data element in a table

<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>

The JSON is displayed in a column called 'Serialized'.

Some of the data looks like this (after formatted)

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

I would like to display the data in an easy to read way, for example

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

Or more simply

Title -- create label -- create or edit label

javascripthtmlreactjsjsontsx


Solution 1:[1]

I added some javascript code to parse the data

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

and am able to access it e.g.

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

However I am getting an error when I parse the data and I think it is because the browser needs more time to load the element before parsing it.

SyntaxError: JSON Parse error: Unexpected identifier "undefined"

when I console log the data it appears just fine

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions