HTMLテーブルのJSONオブジェクトの解析
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配列は既に解析されているため、「データ」を使用できます）
各オブジェクトをループし、繰り返しごとに関連するデータをテーブル行に追加します。
$(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);
}
});
});
シンプルな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.Push('<tr>');
tr.Push("<td>" + json[i].User_Name + "</td>");
tr.Push("<td>" + json[i].score + "</td>");
tr.Push("<td>" + json[i].team + "</td>");
tr.Push('</tr>');
}
$('table').append($(tr.join('')));
});
JQueryで KnockoutJS を使用できます。 KnockoutJSにはスマートデータバインディング機能があります。 foreach binding 機能を使用すると、次の例のようにコードを記述できます。
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 ダミーデータ付き
以下に示すように$を拡張して、オブジェクトの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です
ネストされたJSONオブジェクトからHTMLを生成する別の素敵な再帰的な方法（現在は配列をサポートしていません）：
// generate HTML code for an object
var make_table = function(json, css_class='tbl_calss', tabs=1){
// helper to tabulate the HTML tags. will return '\t\t\t' for num_of_tabs=3
var tab = function(num_of_tabs){
var s = '';
for (var i=0; i<num_of_tabs; i++){
s += '\t';
}
//console.log('tabbing done. tabs=' + tabs)
return s;
}
// recursive function that returns a fixed block of <td>......</td>.
var generate_td = function(json){
if (!(typeof(json) == 'object')){
// for primitive data - direct wrap in <td>...</td>
return tab(tabs) + '<td>'+json+'</td>\n';
}else{
// recursive call for objects to open a new sub-table inside the <td>...</td>
// (object[key] may be also an object)
var s = tab(++tabs)+'<td>\n';
s += tab(++tabs)+'<table class="'+css_class+'">\n';
for (var k in json){
s += tab(++tabs)+'<tr>\n';
s += tab(++tabs)+'<td>' + k + '</td>\n';
s += generate_td(json[k]);
s += tab(--tabs)+'</tr>' + tab(--tabs) + '\n';
}
// close the <td>...</td> external block
s += tab(tabs--)+'</table>\n';
s += tab(tabs--)+'</td>\n';
return s;
}
}
// construct the complete HTML code
var html_code = '' ;
html_code += tab(++tabs)+'<table class="'+css_class+'">\n';
html_code += tab(++tabs)+'<tr>\n';
html_code += generate_td(json);
html_code += tab(tabs--)+'</tr>\n';
html_code += tab(tabs--)+'</table>\n';
return html_code;
}
このコードは大いに役立ちます
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);
}
}
}
}
JSONオブジェクトをHtmlテーブルに解析する別の方法を次に示します
//EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];
for (var i = 0; i < d.length; i++) {
for (var key in d[i]) {
if (col.indexOf(key) === -1) {
col.Push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");// TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < d.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = d[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>これはugいですが、他のオプションをミックスに追加したいだけです。これにはループがありません。デバッグ目的で使用します
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>さまざまなレポートの作成に多くの時間を費やしました。だから、今私はアイデアを持っています-Webレポートを構築するためのWebフレームワークを作成します。私はここから始めました：
https://github.com/ColdSIce/ReportUI
これはangular 4モジュールです。あなたはjsonデータをTableLayoutComponentに渡し、HTMLテーブルを取得することができます結果。テーブルには既に固定ヘッダーがあります。また、デフォルトまたはクリックでいくつかの列を修正できます。さらに、背景色、フォント色、行の高さなどのテーブルプロパティをカスタマイズできます。
もし興味があれば、このプロジェクトに参加して助けてください。
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>