将 ajax 响应附加到 html table

Question

我有一个 AJAX 函数，当页面加载时 returns 这个 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 中，以便在页面加载后填充 table。

<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>

我尝试了每个循环，但我无法让它工作，感谢任何帮助。

Answer 1

很简单。您只需要遍历每个对象。像这样：

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>

Answer 2

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

将 ajax 响应附加到 html table

Append ajax response to html table

html

javascript

arrays

ajax

append