JSON數據到JQUERY的HTML表格

有人知道我可以如何將我的JS文件（例如「用戶1」）中的「用戶」對象的所有值發送到我的HTML表頭？JSON數據到JQUERY的HTML表格

我只能將通過JSON數據結構的一列，但我需要的代碼我所有的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>

這裏是我的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" : "[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>

來源

2017-07-03 Rodrigo

請給的[Web組件標準模板]看看（https://www.webcomponents.org/community/articles/introduction-to-template-element）。您可以考慮一些前端渲染的框架/庫。 – Custodio

您的dataX對象可能是更多結構化的很多。我有一個屬性作爲用戶對象的數組，而不是八個屬性。這只是一個糟糕的設計。我會設計這樣的東西http://jsoneditoronline.org/?id=ad904ce96997543ba07f4251782b55a5 所以，你可以通過數組循環遍歷 – ggderas

事實上，這種新的JSON結構使得事情變得更容易。我將開始惠顧它。 – Rodrigo

，如果我理解正確的話：Javascript和jQuery將做的工作..

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);

來源

2017-07-03 21:49:29

我應該在哪裏放這個代碼？ – Rodrigo

每當你準備好解析你的JSON .. –

你能給我一個例子嗎？ [email protected] – Rodrigo

JSON數據到JQUERY的HTML表格

回答

相關問題