I have an object called usersdata whose output with JSON.stringify(usersdata) produces exactly this:
[{"ioid":"gDlMWAnLxEk8M3dKAAAF","user":"John","rank":"contributor"}]
all I want to do is get the values and wrap around html tags so I get an output like this:
<div id="gDlMWAnLxEk8M3dKAAAF">
<span class="contributor">John</span>
</div>
so I did this:
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>";
but I get an error that says cant convert undefined to object. Why is that?
In case you didn't notice, you declared udata as an array, but later on, you set udata to value, which isn't an array, and thus, you changed the type of the variable udata, which is why udata[0] doesn't work.
I assume you want to add value to the array udata, but that's not how you do it! You have to do 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)
} would return
[{
"ioid": "gDlMWAnLxEk8M3dKAAAF",
"user": "John",
"rank": "contributor"
}]
so now, you just have to use
userlist.textContent = "<div id=\""+udata[0].ioid+"\"><span class=\""+udata[0].rank+"\">"+udata[0].user+"</span></div>";
Here's an example with multiple user data:
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>this way
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>