テキスト文字列から変数を取得[jQueryのここで

Question

は、私が一緒に仕事をしたいテキストです（しばしば変化するので、スクリプトは常にソースからそれを再収集する必要があり）：

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

私は基本的にしたいですこれらの変数を視覚的に表示するテーブルを作成します。 それは最後に次のようになります。

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

任意のアイデアは、私はそれを行うことができますか？

ありがとうございます。その後、持っていてください

Answer 1

Javascriptを使用してjsonを解析する必要があります。 http://www.json.org/js.htmlおよびhttp://json.org/example.htmlを参照してください。サーバーサイド言語を使用している場合は、jsonを簡単に解析する拡張機能があります。 phpは、例えば、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：

何がしたいことは、あなたがjQueryを使ってこれを使用し、URLからオートリフレッシュJSONです： - このコードで

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 ms（3秒）ごとにスコアを自動更新することができます

Answer 2

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>

おそらく、jQueryプラグインを使用して[OK]をしている場合は、データのJSON

Answer 3

からちょうどそれらの名前の代わりに、いくつかのユーザーフレンドリーな名前でフィールド名を交換する必要がありますJqueryデータテーブルプラグインhttps://www.datatables.net/を見てください。 JSON入力を受け入れます。したがって、JSONを破棄してテーブルを作成するための値を手動で割り当てる必要はありません。

はまた

ソートを検索

1. のような機能が付属しています。

2. ページネーション。

3. 輸出機能。