Get variables out of a text string [jQuery]

Question

Here is the text I want to work with (changes often, so the script should always re-gather it from the source):

{"current_players":0,"alive":0,"spectators":0,"max_players":64,"gamemode":"Free For All","start_time":1461428927679}

I basically want to create a table that will visually display these variables. It should look something like this in the end:

/* Ignore me */
td {
  border: 1px solid grey;
}
/* Stop ignoring */

<table>
  <tr>
    <td>Players</td>
    <td>X</td><!-- Variable of "current_players" -->
  </tr>
  <tr>
    <td>Gamemode</td>
    <td>FFA</td><!-- Variable of "gamemode" -->
  </tr>
  <tr>
    <td>...</td>
    <td>X</td><!-- And so on... ->
  </tr>
</table>

Any ideas how I can do that?

Thanks in advance.

Igor Bukin · Accepted Answer · 2016-04-24 09:14:00Z

var data = {
  "current_players": 0,
  "alive": 0,
  "spectators": 0,
  "max_players": 64,
  "gamemode": "Free For All",
  "start_time": 1461428927679
};

!(function($) {

  var $tbl = $('table');
  for (param in data) {
    $tbl.append('<tr><td>' + param + '</td><td>' + data[param] + '</td></tr>')
  }

})(jQuery);

/* Ignore me */

td {
  border: 1px solid grey;
}
/* Stop ignoring */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

</table>

You probably would need to replace field names with some user friendly names instead of just those name from the data json

Deval Khandelwal · Accepted Answer · 2016-04-24 12:40:19Z

You have to parse the json using Javascript. See http://www.json.org/js.html and see http://json.org/example.html. If you are using any server side language, you have extensions to parse json easily in them. Php, for example has a built in function to handle json.

var myJSONObject = {
   "current_players": 0,
   "alive": 0,
   "spectators": 0,
   "max_players": 64,
   "gamemode": "Free For All",
   "start_time": 1461428927679
};
document.getElementById("players").innerHTML = myJSONObject.current_players;
document.getElementById("gamemode").innerHTML = myJSONObject.gamemode;
document.getElementById("alive").innerHTML = myJSONObject.alive;
document.getElementById("max_players").innerHTML = myJSONObject.max_players;

<table>
  <tr>
    <td>Players</td>
    <td id='players'></td>
  </tr>
  <tr>
    <td>Gamemode</td>
    <td id='gamemode'></td>
  </tr>
  <tr>
    <td>Alive</td>
    <td id='alive'></td>
  </tr>
  <tr>
    <td>Max Players</td>
    <td id='max_players'></td>
  </tr>
</table>

EDIT :

What you want is auto refresh json from a url, you use this with jquery :-

setInterval(function(){ 
    console.log("Getting scores...");



    $.get( "IPOfYourChoice:88", function( data) {
        myJSONObject = JSON.parse(data);
       document.getElementById("players").innerHTML = myJSONObject.current_players;
        document.getElementById("gamemode").innerHTML = myJSONObject.gamemode;
        document.getElementById("alive").innerHTML = myJSONObject.alive;
        document.getElementById("max_players").innerHTML = myJSONObject.max_players;
    });

}, 3000);

With this code, you can auto refresh the scores every 3000 ms (3 seconds)

I said it wrong in my question, but the string I use will update to the current statistics of the game. And when I simply store everything in a variable like you did, then It wouldn't be up to date.. right?
@Voakie No. Simply storing the string in a variable won't do anything by itself. You have to call document.getElementById("players").innerHTML = myJSONObject.current_players; and so on to change the value in the table to make use of the json string
In this case everything is stored in myJSONObject. The string I posted in my question can be grabbed by opening IPOfYourChoice:88, and I get it into my document using $.get(); And as soon as the string on this adress changes, myJSONObject should change too, wich it doesn't because it is just a variable defined by hand.

Prakash Thete · Accepted Answer · 2016-04-24 09:16:29Z

0

If you are ok with using jquery plugin then please have a look at Jquery Data Table plugin https://www.datatables.net/. It accepts a JSON input. So you don't have have to break your JSON and assign values manually for building table.

It also comes with functionalities like

Searching
Sorting.
Pagination.
Export functionalities.

answered Apr 24, 2016 at 9:16

Prakash Thete

3,90230 silver badges31 bronze badges

Collectives™ on Stack Overflow

Get variables out of a text string [jQuery]

3 Answers 3

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Related