Tengo una función AJAX que devuelve esta matriz json cuando se carga la página.
{ "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" } }lo que quiero es agregar solo la puntuación más alta y el nombre de usuario, pero no el uid, en la tabla para que la llene una vez que se cargue la página.
<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>Intenté cada ciclo pero no puedo hacer que funcione, se agradece cualquier ayuda.
Es simple. Solo necesita iterar sobre cada objeto. Como esto:
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>`; })