El resultado requerido se adjunta a continuación en esta pregunta. Este código da el resultado correcto.

 import React from 'react'; const sampleJSON = { "object":{ "id": 1, "name": "user1", "email": "user1@gmail.com", } } function App() { return ( <div> { Object.keys(sampleJSON.object).map((key, i) => ( <p key={i}> <span> {key}</span> <span> {sampleJSON.object[key]}</span> </p> ) ) } </div> ) } export default App;

Aquí, en el siguiente código, he usado un objeto anidado dentro de samplejson. Pero no pude mostrarlo en la página web. ¿Qué cambios de código debo hacer para mostrar el objeto anidado en mi página web? Incluso si agrego dos o más objetos anidados dentro de samplejson, debería mostrarse en mi página web.

 import React from 'react'; const sampleJSON = { "object":{ "id": 1, "name": "user1", "email": "user1@gmail.com", "job": { "role": "Front end developer", "experience": "1 year" }, "location": { "city": "Chennai" } } } function App() { return ( <div> { Object.keys(sampleJSON.object).map((key, i) => ( <p key={i}> <span> {key}</span> <span> {sampleJSON.object[key]}</span> </p> ) ) } </div> ) } export default App;

La salida debería ser así,