Append ajax response to html table-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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>