解析 HTML 表的 JSON 对象
Posted
技术标签:
【中文标题】解析 HTML 表的 JSON 对象【英文标题】：Parsing JSON objects for HTML table 【发布时间】：2013-06-08 15:10:51 【问题描述】：我正在尝试显示基于 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"]
我需要的是能够遍历这个数组，为每个对象生成一个表格行或列表项。数组中的对象总数未知，但每个对象都具有相同的格式 - 三个值：名称、分数、团队。
到目前为止，我已经使用了以下代码，它确认我已成功加载控制台中的对象-
$.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 数组已经被解析）
【问题讨论】：
api.jquery.com/jQuery.each developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Access / process (nested) objects, arrays or JSON 的可能副本 @roasted：嗯，是的。这就是OP在问题中所说的。它是被解析成数组的 JSON。 请看以下帖子：***.com/questions/684672/…***.com/questions/1078118/…***.com/questions/8489288/… 【参考方案1】：对于那些对普通 Vanilla JS 的通用解决方案感兴趣的人。它的工作方式与您的 json 中的列数无关。
const myData = ["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 createTable = (json) =>
let table = document.getElementById('js-table')
for (let row of json)
let newRow = table.insertRow();
for (let cell of Object.values(row))
let newCell = newRow.insertCell();
let newText = document.createTextNode(cell);
newCell.appendChild(newText);
createTable(myData)<table>
<tbody id="js-table">
</tbody>
</table>【讨论】：
【参考方案2】：这段代码会有很大帮助
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);
【讨论】：
【参考方案3】：这个很丑，但只是想加入一些其他的选择。这个没有循环。我将它用于调试目的
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 tdbackground: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>【讨论】：
【参考方案4】：这是另一种将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>【讨论】：
【参考方案5】：我花了很多时间开发各种报告。所以，现在我有了一个想法——创建一个用于构建 Web 报告的 Web 框架。我从这里开始：
https://github.com/ColdSIce/ReportUI
现在它是一个 angular 4 模块。您可以将您的 json 数据传递给 TableLayoutComponent 并获取 HTML 表格作为结果。表已经有固定的标题。您也可以默认或单击修复一些列。此外，您还可以自定义表格属性，如背景颜色、字体颜色、行高等。
如果您有兴趣，可以加入我的项目并提供帮助。
【讨论】：
【参考方案6】：这里有两种方法可以做同样的事情，使用或不使用 jQuery：
// 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>【讨论】：
【参考方案7】：另一种从嵌套 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;
【讨论】：
【参考方案8】：遍历每个对象，推入字符串数组并加入它们。追加到目标表中，比较好。
$(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('')));
);
【讨论】：
【参考方案9】：您可以在 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 与您的虚拟数据
【讨论】：
【参考方案10】：通过扩展 $ 从 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
【讨论】：
【参考方案11】：你可以使用简单的 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>
【讨论】：
【参考方案12】：这篇文章对大家很有帮助
首先使用jquery eval解析器解析json数据，然后遍历jquery下面的每个函数都是代码片段：
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();
);
【讨论】：
OP 要求提供表格而不是下拉列表【参考方案13】：循环遍历每个对象，每次迭代都附加一个包含相关数据的表格行。
$(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
【讨论】：
非常感谢您的快速回复——这绝对让我走上正轨。但是，当我用 $.getJSON(url) 替换 json 变量的值时，它似乎没有解析数组，控制台只是返回整个对象...... 再次感谢 - 当我输入 url 并运行脚本时，我现在收到“SyntaxError: JSON Parse error: Unexpected identifier "object" in the error console? 如何刷新td以获取新数据？ @pmandell 我正在使用您在小提琴中提供的代码。但是我只得到表头，没有数据或表。 脚本注入漏洞。以上是关于解析 HTML 表的 JSON 对象的主要内容，如果未能解决你的问题，请参考以下文章
html Ajax单个首先解析Json数据（JSON不是对象）