javascript - 読み込み - HTMLテーブルのJSONオブジェクトの解析




json 画面表示 (7)

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
               });
          }
        });

    });

ダミーデータを使ったフィドルのデモ

https://code.i-harness.com

私は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'を使うことができます)


jQueryの有無にかかわらず同じことをする2つの方法があります:

// jquery way
$(document).ready(function () {
    
  var 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"}];
        
  var tr;
  for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + json[i].User_Name + "</td>");
    tr.append("<td>" + json[i].score + "</td>");
    tr.append("<td>" + json[i].team + "</td>");
    $('table').first().append(tr);
  }  
});

// without jquery
function ready(){
 var 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"}];
  const table = document.getElementsByTagName('table')[1];
  json.forEach((obj) => {
      const row = table.insertRow(-1)
    row.innerHTML = `
      <td>${obj.User_Name}</td>
      <td>${obj.score}</td>
      <td>${obj.team}</td>
    `;
  });
};

if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
  ready();
} else {
  document.addEventListener('DOMContentLoaded', ready);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>User_Name</th>
        <th>score</th>
        <th>team</th>
    </tr>
</table>'
<table>
    <tr>
        <th>User_Name</th>
        <th>score</th>
        <th>team</th>
    </tr>
</table>


この投稿は皆さんにとって非常に役に立ちます

最初jquery eval parserを使用してjsonデータを解析し、次にjqueryを通してiterarateすると、以下の各関数がコードスニペットです。

                var obj = eval("(" + data.d + ")");

                alert(obj);
                $.each(obj, function (index,Object) {

                    var Id = Object.Id;
                    var AptYear = Object.AptYear;
                    $("#ddlyear").append('<option value=' + Id + '>' + AptYear + '</option>').toString();
                });

以下のように$を拡張して、オブジェクトの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です


単純な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>

各オブジェクトにループを張り、関連するデータを含むテーブル行を各繰り返しに追加します。

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

JSFiddle


私は様々なレポートを作成するのに多くの時間を費やしました。 だから、今私は考えている - Webレポートを構築するためのWebフレームワークを作成する。 私はここから始めました:

https://github.com/ColdSIce/ReportUI

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

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







json