將ajax回應附加到html表

我有一個 AJAX 函式，它在頁面加載時回傳這個 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"
   }
}

我想要的是僅將高分和用戶名而不是 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>

我嘗試了每個回圈，但我無法讓它作業，任何幫助表示贊賞。

uj5u.com熱心網友回復：

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>`;
})

uj5u.com熱心網友回復：

很簡單。您只需要遍歷每個物件。像這樣：

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>

標籤：javascript html 数组 阿贾克斯 附加

上一篇：我想將陣列的內容放入h3元素中，然后將其放入其容器中

下一篇：Python逐元素比較