Javascript 使用JQUERY将JSON数据转换为HTML表
有人知道我如何将JS文件中“User”对象的所有值（例如“User 1”）发送到HTML表的标题 我将只放置一个由JSON数据构成的列，但我需要代码将所有JSON数据推送到html文件中，就像下一个结构：Javascript 使用JQUERY将JSON数据转换为HTML表,javascript,jquery,arrays,json,Javascript,Jquery,Arrays,Json,有人知道我如何将JS文件中“User”对象的所有值（例如“User 1”）发送到HTML表的标题 我将只放置一个由JSON数据构成的列，但我需要代码将所有JSON数据推送到html文件中，就像下一个结构： <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Name</th>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Age</th>
<th>skillsTable2</th>
<th>biopicURL</th>
</thead>
<tbody>
<tr>
<td>Usuario 1</td>
<td>Web Developer</td>
<td>28</td>
<td>SEO</td>
<td>../images/fry.jpg</td>
</tr>
</tbody>
</table>
</div>
名称
角色
年龄
技能稳定2
生物照片
Usuario 1
网络开发者
28
搜索引擎优化
../images/fry.jpg
// JSON Metadata Structure //
var skillsTable = ["SEO","Front end Developemetnt","Story Telling"];
var metadataContext = {"Context" : { "itemscope":"itemscope", "itemtype":"http://schema.org/VisualArtwork" } };
var dataX = {
"User 1":[{
"Name" : "Usuario 1",
"Role" : "Web Developer",
"Contacts" : {
"Mobile" : "044 55 4346 3478",
"E-mail" : "roadluac@gmail.com",
"GitHub" : "https://github.com/roadluac2016",
"Facebook" : "https://www.facebook.com/profile.php?id=100017132474848",
"Location" : "Mexico City"
},
"Welcome Message" : "Pnly Don't Stop",
"Age" : 29,
"skillsTable" : skillsTable,
"skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
"bioPicURL" : "../images/fry.jpg"
}],
"User 2":[{
"Name" : "Usuario 2",
"Role" : "Web Developer",
"Contacts" : {
"Mobile" : "044 55 4346 3478",
"E-mail" : "roadluac@gmail.com",
"GitHub" : "https://github.com/roadluac2016",
"Facebook" : "https://www.facebook.com/profile.php?id=100017132474848",
"Location" : "Mexico City"
},
"Welcome Message" : "Pnly Don't Stop",
"Age" : 29,
"skillsTable" : skillsTable,
"skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
"bioPicURL" : "../images/fry.jpg"
}],
"User 3":[{
"Name" : "Usuario 3",
"Role" : "Web Developer",
"Contacts" : {
"Mobile" : "044 55 4346 3478",
"E-mail" : "roadluac@gmail.com",
"GitHub" : "https://github.com/roadluac2016",
"Facebook" : "https://www.facebook.com/profile.php?id=100017132474848",
"Location" : "Mexico City"
},
"Welcome Message" : "Pnly Don't Stop",
"Age" : 29,
"skillsTable" : skillsTable,
"skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
"bioPicURL" : "../images/fry.jpg"
}],
"User 4":[{
"Name" : "Usuario 4",
"Role" : "Web Developer",
"Contacts" : {
"Mobile" : "044 55 4346 3478",
"E-mail" : "roadluac@gmail.com",
"GitHub" : "https://github.com/roadluac2016",
"Facebook" : "https://www.facebook.com/profile.php?id=100017132474848",
"Location" : "Mexico City"
},
"Welcome Message" : "Pnly Don't Stop",
"Age" : 29,
"skillsTable" : skillsTable,
"skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
"bioPicURL" : "../images/fry.jpg"
}],
"User 5":[{
"Name" : "Usuario 5",
"Role" : "Web Developer",
"Contacts" : {
"Mobile" : "044 55 4346 3478",
"E-mail" : "roadluac@gmail.com",
"GitHub" : "https://github.com/roadluac2016",
"Facebook" : "https://www.facebook.com/profile.php?id=100017132474848",
"Location" : "Mexico City"
},
"Welcome Message" : "Pnly Don't Stop",
"Age" : 29,
"skillsTable" : skillsTable,
"skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
"bioPicURL" : "../images/fry.jpg"
}],
"User 6":[{
"Name" : "Usuario 6",
"Role" : "Web Developer",
"Contacts" : {
"Mobile" : "044 55 4346 3478",
"E-mail" : "roadluac@gmail.com",
"GitHub" : "https://github.com/roadluac2016",
"Facebook" : "https://www.facebook.com/profile.php?id=100017132474848",
"Location" : "Mexico City"
},
"Welcome Message" : "Pnly Don't Stop",
"Age" : 29,
"skillsTable" : skillsTable,
"skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
"bioPicURL" : "../images/fry.jpg"
}],
"User 7":[{
"Name" : "Usuario 7",
"Role" : "Web Developer",
"Contacts" : {
"Mobile" : "044 55 4346 3478",
"E-mail" : "roadluac@gmail.com",
"GitHub" : "https://github.com/roadluac2016",
"Facebook" : "https://www.facebook.com/profile.php?id=100017132474848",
"Location" : "Mexico City"
},
"Welcome Message" : "Pnly Don't Stop",
"Age" : 29,
"skillsTable" : skillsTable,
"skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
"bioPicURL" : "../images/fry.jpg"
}],
"User 8":[{
"Name" : "Usuario 8",
"Role" : "Web Developer",
"Contacts" : {
"Mobile" : "044 55 4346 3478",
"E-mail" : "roadluac@gmail.com",
"GitHub" : "https://github.com/roadluac2016",
"Facebook" : "https://www.facebook.com/profile.php?id=100017132474848",
"Location" : "Mexico City"
},
"Welcome Message" : "Pnly Don't Stop",
"Age" : 29,
"skillsTable" : skillsTable,
"skillsTable2" : ["SEO","Front end Developemetnt","Story Telling"],
"bioPicURL" : "../images/fry.jpg"
}]
};
// Metadata variables //
var itemscopeVar = 'itemscope';
var itemtypeVar =' itemtype=';
var itempropVar = 'itemprop=';
// Table Structuring Variable //
var tableTagVar = '<table %metadataL0% id="table" class="table">%Inside%</table>';
var theadVar = '<thead %metadataL1% ><tr id="tableHeader"></tr></thead>';
var tbodyVar = '<tbody %metadataL2% ><tr id="tableColums">%trColumnsContent%</tr></tbody>';
var tdHeaderVar = '<th>%tdDataHeader%</th>';
var tdColumnsVar = '<td>%tdDataColumns%</td>';
// Print Table + Metadata //
function myFunction() {
var formatTableTagVar = tableTagVar.replace('%metadataL0%', itemscopeVar + itemtypeVar + "'" + metadataContext.Context.itemtype + "'" );
var formatTheadVar = theadVar.replace("%metadataL1%", itemscopeVar + itemtypeVar + "'" + metadataContext.Context.itemtype + "'" );
//var formattbodyVarVar = tbodyVar.replace("%metadataL2%", itemscopeVar + itemtypeVar + "'" + metadataContext.Context.itemtype + "'" );
var formatTableTagVarIn = formatTableTagVar.replace("%Inside%", formatTheadVar );
var tableInit = $('#tableBox').append(formatTableTagVarIn);
var switcherTable = 0;
if( switcherTable < 1 ){
var trThead = $('#tableHeader');
var trTbody = $('#tableColums');
$.each(dataX, function (key, value) {
//$('#dataGuide').append($('<div></div><br>').html(key.length + ' (' + value.length + ' results)'));
$.each(value, function (index, titleObj) {
$('#table').append('<tbody>' + tdColumnsVar + '</tbody>'); // Columns
console.log( index + titleObj );
});
trThead.prepend('<th>' + value[0].Name + '</th>'); // Header
console.log( value + key);
});
}
else{};
console.log( itemtypeVar + "'" + metadataContext.Context.itemtype + "'" );
};
//JSON元数据结构//
var skillsTable=[“搜索引擎优化”、“前端开发人员”、“讲故事”]；
var metadataContext={“Context”：{“itemscope”：“itemscope”，“itemtype”：http://schema.org/VisualArtwork" } };
var dataX={
“用户1”：[{
“名称”：“Usuario 1”，
“角色”：“Web开发人员”，
“联系人”：{
“手机”：“044543463478”，
“电子邮件”：roadluac@gmail.com",
“GitHub”：https://github.com/roadluac2016",
“Facebook”：https://www.facebook.com/profile.php?id=100017132474848",
“地点”：“墨西哥城”
},
“欢迎留言”：“请不要停止”，
“年龄”：29岁，
“技能稳定”：技能稳定，
“skillsTable2”：[“搜索引擎优化”、“前端开发人员”、“故事讲述”]，
“bioPicURL”：“./images/fry.jpg”
}],
“用户2”：[{
“名称”：“Usuario 2”，
“角色”：“Web开发人员”，
“联系人”：{
“手机”：“044543463478”，
“电子邮件”：roadluac@gmail.com",
“GitHub”：https://github.com/roadluac2016",
“Facebook”：https://www.facebook.com/profile.php?id=100017132474848",
“地点”：“墨西哥城”
},
“欢迎留言”：“请不要停止”，
“年龄”：29岁，
“技能稳定”：技能稳定，
“skillsTable2”：[“搜索引擎优化”、“前端开发人员”、“故事讲述”]，
“bioPicURL”：“./images/fry.jpg”
}],
“用户3”：[{
“名称”：“Usuario 3”，
“角色”：“Web开发人员”，
“联系人”：{
“手机”：“044543463478”，
“电子邮件”：roadluac@gmail.com",
“GitHub”：https://github.com/roadluac2016",
“Facebook”：https://www.facebook.com/profile.php?id=100017132474848",
“地点”：“墨西哥城”
},
“欢迎留言”：“请不要停止”，
“年龄”：29岁，
“技能稳定”：技能稳定，
“skillsTable2”：[“搜索引擎优化”、“前端开发人员”、“故事讲述”]，
“bioPicURL”：“./images/fry.jpg”
}],
“用户4”：[{
“名称”：“Usuario 4”，
“角色”：“Web开发人员”，
“联系人”：{
“手机”：“044543463478”，
“电子邮件”：roadluac@gmail.com",
“GitHub”：https://github.com/roadluac2016",
“Facebook”：https://www.facebook.com/profile.php?id=100017132474848",
“地点”：“墨西哥城”
},
“欢迎留言”：“请不要停止”，
“年龄”：29岁，
“技能稳定”：技能稳定，
“skillsTable2”：[“搜索引擎优化”、“前端开发人员”、“故事讲述”]，
“bioPicURL”：“./images/fry.jpg”
}],
“用户5”：[{
“名称”：“Usuario 5”，
“角色”：“Web开发人员”，
“联系人”：{
“手机”：“044543463478”，
“电子邮件”：roadluac@gmail.com",
“GitHub”：https://github.com/roadluac2016",
“Facebook”：https://www.facebook.com/profile.php?id=100017132474848",
“地点”：“墨西哥城”
},
“欢迎留言”：“请不要停止”，
“年龄”：29岁，
“技能稳定”：技能稳定，
“skillsTable2”：[“搜索引擎优化”、“前端开发人员”、“故事讲述”]，
“bioPicURL”：“./images/fry.jpg”
}],
“用户6”：[{
“名称”：“Usuario 6”，
“角色”：“Web开发人员”，
“联系人”：{
“手机”：“044543463478”，
“电子邮件”：roadluac@gmail.com",
“GitHub”：https://github.com/roadluac2016",
“Facebook”：https://www.facebook.com/profile.php?id=100017132474848",
“地点”：“墨西哥城”
},
“欢迎留言”：“请不要停止”，
“年龄”：29岁，
“技能稳定”：技能稳定，
“skillsTable2”：[“搜索引擎优化”、“前端开发人员”、“故事讲述”]，
“bioPicURL”：“./images/fry.jpg”
}],
“用户7”：[{
“名称”：“Usuario 7”，
“角色”：“Web开发人员”，
“联系人”：{
“手机”：“044543463478”，
“电子邮件”：roadluac@gmail.com",
“GitHub”：https://github.com/roadluac2016",
“Facebook”：https://www.facebook.com/profile.php?id=100017132474848",
“地点”：“墨西哥城”
},
“欢迎留言”：“请不要停止”，
“年龄”：29岁，
“技能稳定”：技能稳定，
“skillsTable2”：[“搜索引擎优化”、“前端开发人员”、“故事讲述”]，
“bioPicURL”：“./images/fry.jpg”
}],
“用户8”：[{
“名称”：“Usuario 8”，
“角色”：“Web开发人员”，
“联系人”：{
<button type="button" onclick="myFunction()">Put the TABLE</button>
<div id="tableBox" class="table-responsive"></div>
<div id="dataGuide" class="box"></div><br>
var text = "";
for (i=0;i<dataX.length;i++) {
text += "<tr>";
text += "<td>"+ dataX[i].Name +"</td>";
text += "<td>"+ dataX[i].Role +"</td>";
text += "<td>"+ dataX[i].Age +"</td>";
text += "<td>"+ dataX[i].skillsTable2[0] +"</td>";
text += "<td>"+ dataX[i].bioPicURL +"</td>";
text+= "</tr>";
}
$("#tableBox").append(text);