Question

以下是我要使用的文本（经常更改，因此脚本应始终从源代码重新收集）：

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

我基本上想要创建一个可视化显示这些变量的表。它应该看起来像这样：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我有什么想法可以做到这一点？

提前致谢。

Answer 1

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>

您可能需要使用一些用户友好名称替换字段名称，而不是使用数据json中的那些名称替换

Answer 2

你必须使用Javascript解析json。请参阅http://www.json.org/js.html并查看http://json.org/example.html。如果您使用的是任何服务器端语言，则可以使用扩展来轻松地解析json。例如，Php具有内置函数来处理json。

＆＃13;

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;

＆＃13;

<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>

＆＃13;

编辑：

你想要的是从网址自动刷新json，你使用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);

使用此代码，您可以每3000毫秒（3秒）自动刷新分数

Answer 3

如果您可以使用jquery插件，那么请查看Jquery Data Table插件https://www.datatables.net/。它接受JSON输入。因此，您不必破坏JSON并手动为构建表分配值。

它还带有像

这样的功能

搜索
排序。
分页。
出口功能。

从文本字符串中获取变量[jQuery]

3 个答案: