Append ajax 响应 html 表

Question

I have an AJAX function that returns this json array when the page loads.

{
   "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"
   }
}

what I want is to append only the high score and the username but not the uid into the table so it would populate the table once the page loads.

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

I tried each loop but I can't get it to work, any help is appreciated.

Answer 1

It is simple. You just need to iterate over each object. Like this:

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