Tengo un objeto llamado usersdata cuya salida con JSON.stringify(usersdata) produce exactamente esto:
[{"ioid":"gDlMWAnLxEk8M3dKAAAF","user":"John","rank":"contributor"}]todo lo que quiero hacer es obtener los valores y ajustar las etiquetas html para obtener un resultado como este:
<div id="gDlMWAnLxEk8M3dKAAAF"> <span class="contributor">John</span> </div>así que hice esto:
var udata = []; for (const [key, value] of Object.entries(usersdata)) { udata = value; } userlist.textContent = "<div id=\""+udata[0]+"\"><span class=\""+udata[1]+"\">"+udata[2]+"</span></div>"; pero aparece un error que dice que no se cant convert undefined to object . ¿Porqué es eso?
En caso de que no te hayas dado cuenta, declaraste udata como una array , pero luego estableciste udata en value , que no es una matriz, y por lo tanto, cambiaste el tipo de la variable udata , razón por la cual udata[0] no funciona.
Supongo que desea agregar value a la matriz udata , ¡pero no es así como lo hace! Tienes que hacer udata.push(value) .
const usersdata = [{"ioid":"gDlMWAnLxEk8M3dKAAAF","user":"John","rank":"contributor"}] var udata = []; for (const [key, value] of Object.entries(usersdata)) { udata.push(value); console.log(udata) }volvería
[{ "ioid": "gDlMWAnLxEk8M3dKAAAF", "user": "John", "rank": "contributor" }]así que ahora solo tienes que usar
userlist.textContent = "<div id=\""+udata[0].ioid+"\"><span class=\""+udata[0].rank+"\">"+udata[0].user+"</span></div>";Aquí hay un ejemplo con múltiples datos de usuario:
const usersdata = [{"ioid":"gDlMWAnLxEk8M3dKAAAF","user":"John","rank":"contributor"},{"ioid":"gDlMWAerefd3dKAAAF","user":"Jane","rank":"editor"}]; var udata = []; let userInfo; const userList = document.getElementById('user-list'); for (let [key, value] of Object.entries(usersdata)) { udata.push(value); userList.innerHTML += "<div id=\""+udata[key].ioid+"\"><span class=\""+udata[key].rank+"\">"+udata[key].user+"</span></div>"; console.log("<div id=\""+udata[key].ioid+"\"><span class=\""+udata[key].rank+"\">"+udata[key].user+"</span></div>"); } .contributor { color: blue; } .editor { color: red; } <div id="user-list"></div>Por aquí
const userList = document.getElementById('user-list') , usersdata = [ {ioid:'gDlMWAnLxEk8M3dKAAAF', user: 'John', rank: 'contributor' } ] ; userList.innerHTML = ''; for (let {ioid, user, rank} of usersdata) userList.innerHTML += `<div id="${ioid}"><span class="${rank}r">${user}</span></div>\n`; console.log('innerHTML ==>', userList.innerHTML ); console.log( JSON.stringify(usersdata) ); <div id="user-list"></div>