Dreamlo leaderboard - show results without refreshing a page

Phaser 3
1

Hello, I am trying to use dreamlo leaderboard for the first time:

Did not work before with those http request, so I am confused.

Basically, I create a table in index.html as suggested on their site, and I hide it with CSS at the beginning.

<table class="dreamloLBTable">
     <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>
</table>

Adding new user/score in .js file:

var username = "username";
var score = 50;

const Http = new XMLHttpRequest();
const url=`http://dreamlo.com/lb/privatekey/**add-pipe**/${username}/${score}`;
Http.open("GET", url, true);
Http.send();

After running this code I can see new entries in database on dreamlo site.
Then I make a table visible

Http.onreadystatechange = function() {
         // table is visible now                      
}

The problem is that the last entry is not shown in the table (“username, 50” in this case). I have to refresh the page to see the latest entry.

What would be the easiest way to show the last entry without refreshing a page?

2

OK, I realized there is no easy way, I’ll have to use JSON file from dreamlo and then to populate table with JSON data, but this JSON file contains multiple objects, I hope I’ll find a solution.

3

For adding the new result to the table, after you make the API request to store the new score in dreamIo, you could append a new row to the table with the new data. You could grab the table by the class name, or an id if you add one, and then use JavaScript to add the new data.

An good example of this can be seen here: HTMLTableElement: insertRow() method - Web APIs | MDN