I have made a leaderboad that shows the scores of the users from the local storage. But It isn't in the order of the scores (highest to lowest). Also, I want to have only up to 10 users shown at a time in the leaderboard. I thought about using a for loop for making it stop at 10, but that just printed every user 10 times.

index.html

    <table border="2" id="Ranking" class="ldr"></table>
    <script> 
    loadRankingTable();
    window.onload = () => {
    if (sessionStorage.loggedInUser !== undefined) {
    let oldData = localStorage.getItem(sessionStorage.loggedInUser);
    if (oldData) {
        oldData = JSON.parse(oldData);
        oldData.topScore = highscore;
        localStorage.setItem(sessionStorage.loggedInUser, JSON.stringify(oldData));
    }   
    document.getElementById("Greeting").innerHTML = sessionStorage.loggedInUser;
    }
    }

    </script>

prac.js

function loadRankingTable(){
    let str = "<table><tr><th>Rank</th><th>Name</th><th>Score</th></tr>";
    for(let key of Object.keys(localStorage)){
        let usr = JSON.parse(localStorage[key]);
        if (key !== "highscore"){
                str += "<tr><td>" + "1" + "</td><td>" + usr.username + "</td><td>" + usr.topScore + "</td></tr>";
        }
    }
    str += "</table>";
    document.getElementById("Ranking").innerHTML = str;
}