Tengo un elemento de datos json en una tabla.
<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>El JSON se muestra en una columna llamada 'Serializado'.
Algunos de los datos se ven así (después de formatearse)
{ "app": { "determination": { "home": { "title": "Determinations", "createLabel": "Create a new Determination", "createOrEditLabel": "Create or edit a Determination", "search": "Search for Determination", "notFound": "No Determinations found" }, } } }Me gustaría mostrar los datos de una manera fácil de leer, por ejemplo
<Row> <Col sm="4"> {title} </Col> <Col sm="4"> {createLabel} </Col> <Col sm="4"> {createOrEditLabel} </Col> </Row>O más simplemente
Título -- crear etiqueta -- crear o editar etiqueta
Agregué un código javascript para analizar los datos.
const data = JSON.parse(assessmentEntity.serialized);y puedo acceder a él, por ejemplo
<Row> {data.app.determination.home.title} </Row>Sin embargo, recibo un error cuando analizo los datos y creo que se debe a que el navegador necesita más tiempo para cargar el elemento antes de analizarlo.
SyntaxError: JSON Parse error: Unexpected identifier "undefined"cuando registro los datos en la consola, parece estar bien