parsingHTML表格的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"}] 我需要的是能够遍历这个数组，为每个对象生成一个表行或列表项。 arrays中的总体对象数量未知，但每个对象都有相同的格式 – 三个值：名称，分数，团队。
到目前为止，我已经使用了下面的代码，它确认我正在成功加载控制台中的对象 –
$.getJSON(url, function(data){ console.log(data); });
但我不知道如何遍历它们，将它们parsing到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数组已被parsing我相信）
循环遍历每个对象，在每个迭代中附加一个包含相关数据的表格行。
$(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
你可以使用简单的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>
循环每个对象，推入string数组并join它们。 附加在目标表中，效果更好。
$(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具有智能数据绑定function。 通过使用foreach绑定function，你可以像这个例子一样编写你的代码：
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 }); } }); });
与您的虚拟数据的小提琴演示
如下所示，通过扩展$来从对象的JSON数组中创buildHTML表
$.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
另一个很好的recursion方法来从嵌套的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; }
这里有两种方法来做同样的事情，有或没有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>
我花了很多时间来开发各种报告。 所以，现在我有一个想法 – 创build一个Web框架来build立networking报告。 我已经开始在这里：
https://github.com/ColdSIce/ReportUI
现在它是一个angular度4模块。 你可以将你的json数据传递给TableLayoutComponent，并得到一个HTML表格 。 表已经有固定的标题。 你也可以通过默认或点击修复你的一些列。 在这里，您可以自定义表格属性，如背景颜色，字体颜色，行高等。
如果你有兴趣，你可以join我的项目和帮助。
这篇文章对大家都非常有帮助
首先使用jquery evalparsing器parsingjson数据，然后通过jquery迭代下面的每个函数是代码sniplet：
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(); });
