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