Author Topic: Tournament Status HTML table from JSON?  (Read 213 times)

efdenny

  • Full Member
  • ***
  • Posts: 135
    • View Profile
Tournament Status HTML table from JSON?
« on: April 28, 2018, 12:04:07 PM »
Has anyone had success building an HTML table (current player information; Rank, Name, TotalWinnings, etc -- similar to the Player Rankings page within TD) for the Tournament Status html page from Status Updates? I'm struggling with it... examples would be great... TIA

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5583
    • View Profile
Re: Tournament Status HTML table from JSON?
« Reply #1 on: April 30, 2018, 05:12:32 PM »
I was going to refer you to this topic: http://www.thetournamentdirector.net/forums/index.php?topic=5384.0

... but then discovered that was you.  :)

What are you struggling with?

efdenny

  • Full Member
  • ***
  • Posts: 135
    • View Profile
Re: Tournament Status HTML table from JSON?
« Reply #2 on: April 30, 2018, 06:41:32 PM »
I can't seem to get a table to render. I've been trying to use something like this to loop through and build the table in the TournamentStatus.js:

  var theBuyIns = parseInt(TDStatus.Vars["Buyins"]);
  var tr;
  for (var z = 0; z < theBuyIns;; z++) {
      tr = $('<tr/>');
      tr.append("<td>" + TDStatus.Vars.Players[z].Rank; + "</td>");
      tr.append("<td>" + TDStatus.Vars.Players[z].Nickname; + "</td>");
      tr.append("<td>" + TDStatus.Vars.Players[z].TotalWinnings; + "</td>");
      $('table').append(tr);
  }

and then just try to make a basic table in TournamentStatus.html:

<table>
    <tr>
        <th>Rank</th>
        <th>Nickname</th>
        <th>TotalWinnings</th>
    </tr>
</table>

but this doesn't seem to work. Was hoping someone out there had some example code to share...
« Last Edit: April 30, 2018, 07:09:17 PM by efdenny »

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5583
    • View Profile
Re: Tournament Status HTML table from JSON?
« Reply #3 on: May 01, 2018, 11:07:04 PM »
Well, I don't do a whole lot of building the DOM this way, using jQuery or anything else, but I do spot some simple errors in your code.

for (var z = 0; z < theBuyIns;; z++) {

Those two semicolons together will cause an error, because it expects after the first of the two it will find an expression (z++).  So take out one of the two semicolons.

tr.append("<td>" + TDStatus.Vars.Players[z].Rank; + "</td>");

Actually each of these lines has an extraneous semicolon (after TDStatus.Vars.Players[z].Rank in this case).  Remove them.

$('table').append(tr);

This is probably OK.  I tend to reference things by ID, so I immediately thought this needed a # in front of "table", but this will reference every table on the page and append the rows to it.  If this is what you want, then OK.

efdenny

  • Full Member
  • ***
  • Posts: 135
    • View Profile
Re: Tournament Status HTML table from JSON?
« Reply #4 on: May 02, 2018, 10:33:16 AM »
Thanks, Corey. Iím making headway... just need to figure out how to sort and keep the rows from appending at every refresh interval...

efdenny

  • Full Member
  • ***
  • Posts: 135
    • View Profile
Re: Tournament Status HTML table from JSON?
« Reply #5 on: May 02, 2018, 06:21:10 PM »
Here's my html:

<table id="myTable">
      <tr>
        <th>Rank</th>
        <th>Name</th>
        <th>Hits</th>
        <th>Total Winnings</th>
        <th>Hitman</th>
        <th>Time Out</th>
      </tr>
      <tbody></tbody>
      </table>

and the .js stuff:

  var tr;
  var z = 0;
  while (TDStatus.Vars.Players[z]) {
      tr = $('<tr/>');
      tr.append("<td>" + TDStatus.Vars.Players[z].Rank + "</td>");
      tr.append("<td>" + TDStatus.Vars.Players[z].Nickname + "</td>");
      tr.append("<td>" + TDStatus.Vars.Players[z].Hits + "</td>");
      tr.append("<td>" + TDStatus.Vars.Players[z].TotalWinnings + "</td>");
      tr.append("<td>" + TDStatus.Vars.Players[z].Hitman + "</td>");
      if ( TDStatus.Vars.Players[z].TimeOut < 1 ) {
        tr.append("<td>" + "</td>");
      } else {
        tr.append("<td>" + new Date(TDStatus.Vars.Players[z].TimeOut) + "</td>");   
      }
      $("myTable").append(tr);
      z++;
  }


All of this returns a nice table, but it's not sorted. As I stated earlier, it also appends the same data at every refresh interval. Any thoughts?

Corey Cooper

  • Administrator
  • Hero Member
  • *****
  • Posts: 5583
    • View Profile
Re: Tournament Status HTML table from JSON?
« Reply #6 on: May 06, 2018, 05:12:54 PM »
Sure.  Sort the players first.  You can try something like this:

Code: [Select]
TDStatus.Vars.Players.sort(function(a, b) {
  if(a.LastName < b.LastName)
    return -1;
  else if(a.LastName > b.LastName)
    return 1;
  else if(a.FirstName < b.FirstName)
    return -1;
  else if(a.FirstName > b.FirstName)
    return 1;
  else if(a.NickName < b.NickName )
    return -1;
  else if(a.NickName > b.NickName )
    return 1;
 
  return 0;
});

You probably want to clear the table each time first.  See https://stackoverflow.com/questions/2620181/clear-table-jquery.

efdenny

  • Full Member
  • ***
  • Posts: 135
    • View Profile
Re: Tournament Status HTML table from JSON?
« Reply #7 on: May 07, 2018, 08:00:50 AM »
Awesome find! Thanks again Corey...