42

JSON データに基づいて「リーダーボード」テーブルを表示しようとしています。

私は JSON 形式について多くのことを読み、いくつかの初期の障害を克服しましたが、私の Javascript の知識は非常に限られているため、助けが必要です!

基本的に、私の JSON データは次のようになります。

[{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]

必要なのは、この配列をループして、各オブジェクトのテーブル行またはリスト項目を生成できるようにすることです。配列内の合計オブジェクト数は不明ですが、それぞれの形式は同じです。名前、スコア、チームの 3 つの値があります。

これまでのところ、コンソールにオブジェクトを正常にロードしていることを確認する次のコードを使用しました。

$.getJSON(url,
function(data){
  console.log(data);
});

しかし、それらを繰り返し処理してHTMLテーブルに解析する方法がわかりません。

次のステップは、エントリをスコアの降順でソートすることです...

どんな助けでも大歓迎です。ありがとう！

編集：

以下のコードを更新しました。これは機能します。

$.getJSON(url,
function (data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].User_Name + "</td>");
        tr.append("<td>" + data[i].score + "</td>");
        tr.append("<td>" + data[i].team + "</td>");
        $('table').append(tr);
    }
});

($.parseJSON は必要ありませんでした。JSON 配列は既に解析されているので、'data' を使用できます)

4

13 に答える 13

8

シンプルな jQuery jPut プラグインを使用できます

http://plugins.jquery.com/jput/

<script>
$(document).ready(function(){

var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
    jsonData:json,
    //ajax_url:"youfile.json",  if you want to call from a json file
    name:"tbody_template",
});

});
</script>   

<div jput="tbody_template">
 <tr>
  <td>{{name}}</td>
  <td>{{score}}</td>
 </tr>
</div>

<table>
 <tbody id="tbody">
 </tbody>
</table>
于 2014-06-01T15:09:38.797 に答える
4

jQuery でKnockoutJSを使用できます。KnockoutJS にはスマートなデータ バインディング機能があります。foreach バインディング機能を使用すると、 次の例のようにコードを記述できます。

HTML:

<table>
    <thead>
        <tr>
            <th>User Name</th>
            <th>Score</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: teams">
        <tr>
            <td data-bind="text: User_Name"></td>
            <td data-bind="text: score "></td>
            <td data-bind="text: team "></td>
        </tr>
    </tbody>
</table>

JavaScript:

$(document).ready(function () {
        $.getJSON(url,function (json) {
               ko.applyBindings({
                  teams: json
               });
          }
        });

    });

ダミーデータを使用したFiddle Demo

于 2015-01-09T06:31:58.630 に答える
2

これは醜いですが、他のオプションをミックスに追加したいだけです. これにはループがありません。デバッグ目的で使用します

var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
var myStrObj = JSON.stringify(myObject)
var myHtmlTableObj = myStrObj.replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")

$('#myDiv').html(myHtmlTableObj)

例：

    var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
    var myStrObj = JSON.stringify(myObject)
    var myHtmlTableObj = myStrObj.replace(/\"/g,"").replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")

    $('#myDiv').html(myHtmlTableObj)
#myDiv table td{background:whitesmoke;border:1px solid lightgray}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='myDiv'>table goes here</div>

于 2018-10-01T17:47:24.133 に答える
2

以下に示すように $ を拡張して、オブジェクトの JSON 配列から HTML テーブルを作成します。

$.makeTable = function (mydata) {
            var table = $('<table border=1>');
            var tblHeader = "<tr>";
            for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
            tblHeader += "</tr>";
            $(tblHeader).appendTo(table);
            $.each(mydata, function (index, value) {
                var TableRow = "<tr>";
                $.each(value, function (key, val) {
                    TableRow += "<td>" + val + "</td>";
                });
                TableRow += "</tr>";
                $(table).append(TableRow);
            });
            return ($(table));
        };

次のように使用します。

var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");

ここで、TableCont はいくつかの div です

于 2015-01-07T07:06:55.520 に答える
0

さまざまなレポートの作成に多くの時間を費やしました。そこで、私はアイデアを思いつきました - Web レポートを作成するための Web フレームワークを作成します。私はここから始めました：

https://github.com/ColdSIce/ReportUI

現在はangular 4モジュールです。jsonデータを TableLayoutComponent に渡し、結果としてHTML テーブルを取得できます。テーブルにはすでに固定ヘッダーがあります。また、デフォルトまたはクリックでいくつかの列を修正できます。さらに、背景色、フォント色、行の高さなどのテーブル プロパティをカスタマイズできます。

興味があれば、このプロジェクトに参加して助けてください。

于 2017-08-31T06:42:10.457 に答える
0

このコードは大いに役立ちます

function isObject(data){
    var tb = document.createElement("table");

    if(data !=null) {
        var keyOfobj = Object.keys(data);
        var ValOfObj = Object.values(data);

        for (var i = 0; i < keyOfobj.length; i++) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var key = document.createTextNode(keyOfobj[i]);

            td.appendChild(key);
            tr.appendChild(td);
            tb.appendChild(tr);

            if(typeof(ValOfObj[i]) == "object") {

                if(ValOfObj[i] !=null) {
                    tr.setAttribute("style","font-weight: bold");   
                    isObject(ValOfObj[i]);
                } else {
                    var td = document.createElement('td');
                    var value = document.createTextNode(ValOfObj[i]);

                    td.appendChild(value);
                    tr.appendChild(td);
                    tb.appendChild(tr);
                }
            } else {
                var td = document.createElement('td');
                var value = document.createTextNode(ValOfObj[i]);

                td.appendChild(value);
                tr.appendChild(td);
                tb.appendChild(tr);
            }
        }
    }
}
于 2019-04-03T06:51:27.270 に答える