[英]Append ajax response to html table
我有一個 AJAX function 在頁面加載時返回這個 json 數組。
{
"ydtd4EGwIgb9QAPekbzBUXq9ZXp2":{
"Highscore":1000,
"username":"ash"
},
"qo80G8bFPsRkujLm9qWtASz0TE32":{
"Highscore":900,
"username":"pink"
},
"oyWEgmEAMENvr8zTGd6gqCMyVPS2":{
"Highscore":800,
"username":"orange"
},
"acjqiNwlxqfZsSaRBYKoaVOqomh1":{
"Highscore":700,
"username":"white"
},
"IhnWPgRT1gVLrxLhD6ZvNn9migX2":{
"Highscore":"700",
"username":"RED"
},
"ZeGUezY38gcHX0NXaommRPR65cR2":{
"Highscore":600,
"username":"blue"
},
"A41jXf0wmQQqzUlAu6WAuaf04Nk2":{
"Highscore":600,
"username":"mary"
},
"Vm4jMNI83mSFdN4wYbfJ6C7ecEH3":{
"Highscore":500,
"username":"green"
},
"PtTdYXIWYAeMOrIPE8FBN66F9L32":{
"Highscore":400,
"username":"gray"
},
"OeUusBMYjBSYg6UJ8I3eze2TUHi2":{
"Highscore":300,
"username":"yellow"
},
"9xn2ZH9m63Rs34Erkz6N69kuE653":{
"Highscore":100,
"username":"violet"
}
}
我想要的是 append 只有高分和用戶名,而不是表中的 uid,所以一旦頁面加載它就會填充表。
<table class="table table-borderless table-dark table-striped" id="records_table">
<tr>
<th style="text-align: center;">Rank</th>
<th style="text-align: center;">Username</th>
<th style="text-align: center;">Highscore</th>
</tr>
</table>
我嘗試了每個循環,但我無法讓它工作,感謝任何幫助。
很簡單。 您只需要遍歷每個 object。 像這樣:
const data = { "ydtd4EGwIgb9QAPekbzBUXq9ZXp2":{ "Highscore":1000, "username":"ash" }, "qo80G8bFPsRkujLm9qWtASz0TE32":{ "Highscore":900, "username":"pink" }, "oyWEgmEAMENvr8zTGd6gqCMyVPS2":{ "Highscore":800, "username":"orange" }, "acjqiNwlxqfZsSaRBYKoaVOqomh1":{ "Highscore":700, "username":"white" }, "IhnWPgRT1gVLrxLhD6ZvNn9migX2":{ "Highscore":"700", "username":"RED" }, "ZeGUezY38gcHX0NXaommRPR65cR2":{ "Highscore":600, "username":"blue" }, "A41jXf0wmQQqzUlAu6WAuaf04Nk2":{ "Highscore":600, "username":"mary" }, "Vm4jMNI83mSFdN4wYbfJ6C7ecEH3":{ "Highscore":500, "username":"green" }, "PtTdYXIWYAeMOrIPE8FBN66F9L32":{ "Highscore":400, "username":"gray" }, "OeUusBMYjBSYg6UJ8I3eze2TUHi2":{ "Highscore":300, "username":"yellow" }, "9xn2ZH9m63Rs34Erkz6N69kuE653":{ "Highscore":100, "username":"violet" } }; for (const key in data) { const {Highscore, username, rank = "???"} = data[key]; document.querySelector('table > tbody').innerHTML += ` <tr><td>${rank}</td><td>${username}</td><td>${Highscore}</td></tr>`; }
<table> <thead> <th style="text-align: center;">Rank</th> <th style="text-align: center;">Username</th> <th style="text-align: center;">Highscore</th> </thead> <tbody></tbody> </table>
var obj ={
"ydtd4EGwIgb9QAPekbzBUXq9ZXp2":{
"Highscore":1000,
"username":"ash"
},
"qo80G8bFPsRkujLm9qWtASz0TE32":{
"Highscore":900,
"username":"pink"
},
"OeUusBMYjBSYg6UJ8I3eze2TUHi2":{
"Highscore":1200,
"username":"yellow"
},
"9xn2ZH9m63Rs34Erkz6N69kuE653":{
"Highscore":100,
"username":"violet"
}
}
var res = Object.keys(obj).map((data)=>{
var innerdata = obj[data];
var score = innerdata.Highscore;
var username = innerdata.username;
return [score,username]
})
var result = res.sort((a,b)=> b[0]-a[0])
var final = Object.keys(result).map((rank)=>{
var Rank =Number(rank)+1;
var score = result[rank][0];
var name = result[rank][1]
document.querySelector('table > tbody').innerHTML += `
<tr><td>${Rank}</td><td>${name}</td><td>${score}</td></tr>`;
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.