使用JQUERY将JSON数据转换为HTML表 [英] JSON data to HTML table with JQUERY
本文介绍了使用JQUERY将JSON数据转换为HTML表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人知道如何将JS文件中"User"对象的所有值(例如"User 1")发送到HTML表的标题吗?
Someone knows how i can send all the values of the "User" object in my JS file ("User 1" for example) to the header of my HTML Table?
我只会放置一个由JSON数据构成的列，但是我需要代码将我的所有JSON数据像下一个结构一样推送到html文件中:
I will only put one column structured by JSON data, but I need that the code push all my JSON data to the html file like the next structure:
<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>
这是我的JS代码:
// 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 + "'" );
};
这是HTML:
<button type="button" onclick="myFunction()">Put the TABLE</button>
<div id="tableBox" class="table-responsive"></div>
<div id="dataGuide" class="box"></div><br>
推荐答案
如果我正确理解:Javascript和Jquery可以完成这项工作.
If I've understand correctly: Javascript and Jquery will do the job..
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);
这篇关于使用JQUERY将JSON数据转换为HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
