0
「User」オブジェクトのすべての値をJSファイル（「ユーザー1」など）のHTMLテーブルのヘッダーにどのように送ることができるのかを知っていますか？私のJSコードはここJQUERYを使用したJSONデータからHTMLへのテーブル
<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>
：
私はJSONデータで構成1列に配置しますが、私はコードは次の構造のようなhtmlファイルにすべての私のJSONデータをプッシュすることを必要としますここで
// 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" : "[email protected]",
"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" : "[email protected]",
"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" : "[email protected]",
"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" : "[email protected]",
"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" : "[email protected]",
"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" : "[email protected]",
"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" : "[email protected]",
"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" : "[email protected]",
"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>
は、[テンプレートのための標準的なWebコンポーネント]（https://www.webcomponents.org/community/articles/introduction-to-template-element）の表情を与えてください。フロントエンドレンダリングのためのいくつかのフレームワーク/ライブラリも考慮する必要があります。 – Custodio
あなたのdataXオブジェクトは、もっと多くの構造化されています。私は8つのプロパティの代わりに、ユーザーオブジェクトの配列として単一のプロパティを持っています。それはちょうど悪いデザインです。私はこれを次のように設計しますhttp://jsoneditoronline.org/?id=ad904ce96997543ba07f4251782b55a5 したがって、配列をループすることができます – ggderas
実際、この新しいJSON構造は物事を簡単にします。私はそれを始めるでしょう。 – Rodrigo