我有一個名為的物件，usersdata其輸出JSON.stringify(usersdata)正是這樣產生的：
[{"ioid":"gDlMWAnLxEk8M3dKAAAF","user":"John","rank":"contributor"}]
我想要做的就是獲取值并環繞 html 標簽，所以我得到這樣的輸出：
<div id="gDlMWAnLxEk8M3dKAAAF">
<span class="contributor">John</span>
</div>
所以我這樣做了：
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>";
但我收到一個錯誤，說cant convert undefined to object. 這是為什么？
uj5u.com熱心網友回復：
這邊走
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 hljs-subst">${rank}r">${user}</span></div>\n`;
console.log('innerHTML ==>', userList.innerHTML );
console.log( JSON.stringify(usersdata) );<div id="user-list"></div>uj5u.com熱心網友回復：
萬一您沒有注意到，您宣告udata為 an array，但后來您設定udata為value，它不是一個陣列，因此，您更改了變數的型別udata，這就是為什么udata[0]不起作用。
我假設您想添加value到 array udata，但這不是您的操作方式！你必須這樣做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)
} 會回來
[{
"ioid": "gDlMWAnLxEk8M3dKAAAF",
"user": "John",
"rank": "contributor"
}]
所以現在，你只需要使用
userlist.textContent = "<div id=\"" udata[0].ioid "\"><span class=\"" udata[0].rank "\">" udata[0].user "</span></div>";
這是一個包含多個用戶資料的示例：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/315802.html
標籤：javascript 目的