Quiero representar datos JSON en HTML en div con contenido de identificación en etiquetas de párrafo en este formato:
Identificación: XYZ
Nombre de usuario: ABC
Edad : Kd
Cómo puedo hacerlo ?? Soy nuevo en async-await, alguien me puede ayudar??
./usuario.json archivo
[ { "id":1002, "username":"dcode", "age":30 }, { "id":1140, "username":"otheruser", "age":41 } ] //My async await async function loadUsers() { const response = await fetch("./user.json"); return response.json(); } document .addEventListener('DOMContentLoaded',async()=>{ try{ users = await loadUsers(); } catch (e) { console.log("ERROR"); console.log(e); } console.log(users); })Después de obtener los datos, puede crear elementos de párrafo, agregar datos de usuario al innerText del elemento de párrafo y luego agregarlo al contenedor div que tiene content de identificación
async function loadUsers() { const response = await fetch("./user.json"); return response.json(); } document.addEventListener("DOMContentLoaded", async () => { try { const users = await loadUsers(); const divContainer = document.getElementById('content'); users.forEach(user => { const paragraphElem = document.createElement('p'); paragraphElem.innerText = `ID: ${user.id} \n Username: ${user.username} \n Age: ${user.age}`; divContainer.appendChild(paragraphElem); }); } catch (e) { console.log('ERROR'); console.log(e); } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="content"></div> <script src="script.js"></script> </body> </html>No puede controlar cuándo se ejecutará su secuencia de comandos. A veces, es posible que DOMContentLoaded ya se haya activado cuando tenga la oportunidad de escuchar el evento.
Para tener eso en cuenta, su código debe verificar si DOMContentLoaded ya se activó y, de ser así, proceder a ejecutar de inmediato lo que sea necesario para esperar a DOMContentLoaded:
Consulte esta respuesta
Un ejemplo práctico de lo que quieres lograr.
//My async await async function loadUsers() { let response = await fetch("https://api.sampleapis.com/wines/reds"); return response.json(); } let users; async function runWhenPageIsFullyParsed() { console.log("on content load"); try { users = await loadUsers(); } catch (e) { console.log("ERROR"); console.log(e); } console.log(users); } if (document.readyState === "complete") { runWhenPageIsFullyParsed(); } else { window.addEventListener("DOMContentLoaded", runWhenPageIsFullyParsed); }Nota: He usado un enlace externo aquí, por ejemplo.