Minor formatting issue, printing from loops

I am creating a game in javascript and I am accessing the high scores from a java spring server. All that is well, but when I get the top 10 scores and print them, I have a small formatting issue.

Looping through all values and printing the top 10 to the screen I get something like this:

  1. Derrick 20
  2. Derrick 20
  3. Derrick 20
  4. Derrick 20
  5. Derrick 20
  6. Derrick 20
  7. Derrick 20
  8. Derrick 20
  9. Derrick 20
  10. Derrick 20
    (this forum auto fixes my issue, where 10 causes the name and score to be shifted 1 over from the other scores.)

That last line bothers me. In java, I could use string format. Can somebody help with how to do it in javascript?

This is my current way of printing it to the screen:
for(var a = 0; a < data.length; a++)
ctx.fillStyle = “red”;
ctx.font = “30px Arial”;
ctx.fillText((a+1) + " " + "User: " + data[a].name + " Score: " + data[a].score, 10, 30 + (a * 30));

Excellent. So we got code. Now, what does the data look like?

The data is just an array of objects containing a name and a score. I guess I could use a table, but not sure if there is a pure javascript way of doing that

Ahhhh… I misunderstood. I assumed you were having a data issue, but this is, in fact, a formatting issue.

For the record, to avoid the forum autofixing, simply surround your code snippet with three backticks before and after.

So you’re not using an ordered list (<ol>...</ol>) to display the list, you’re doing the numbers manually? The ordered list would do exactly the alignment you’re looking for, by default.

Learn more about it at https://devdocs.io/html/element/ol