從json文件讀取數據並創建html文件

您好我是jquery和json文件的新手，我想從json文件創建html文件。首先從.json文件讀取數據然後基於json對象創建html文件我的JSON數據是： -從json文件讀取數據並創建html文件

{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"5544F75A-4589-4605-B447-0AB123A1865D","parent_guid":"00000000-0000-0000-0000-000000000000","ElementName":"Main","elementtype":"Form","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"width":"28%","height":"200px"}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","parent_guid":"5544F75A-4589-4605-B447-0AB123A1865D","ElementName":"MainTab","elementtype":"tab","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"width":"65%"}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"6E13FCBC-0DB2-4499-B200-61CD5A36F0C1","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Results","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"2","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"E5539403-9A58-4310-8013-AF4EEF62C217","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Billing","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"113293EE-0997-4398-8E4A-6BE7AEDC32C1","parent_guid":"6EB6C873-E2EC-4515-A6D8-2FBF0119F573","ElementName":"Utilities","elementtype":"tabdetail","elementsource":"","onload":"","sequence":"3","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"4EFA32EC-B37E-4DC2-A249-E7156196918F","parent_guid":"6E13FCBC-0DB2-4499-B200-61CD5A36F0C1","ElementName":"ResultsTab","elementtype":"tab","elementsource":"","onload":"","sequence":"0","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","parent_guid":"E5539403-9A58-4310-8013-AF4EEF62C217","ElementName":"BillingTabHeader","elementtype":"tab","elementsource":"","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"9E622E70-095A-4A1A-BA06-C67946D49549","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Current Billing","elementtype":"","elementsource":"","onload":"","sequence":"3","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"B41D9F7B-ED6F-47C5-8562-437D9F5F23AD","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Billing","elementtype":"","elementsource":"Sp_getBilling","onload":"","sequence":"1","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"151F6F13-C200-4EDA-8467-1D5AEB5F03A2","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"PreBilling","elementtype":"","elementsource":"","onload":"","sequence":"2","isPublic":"0","attributes":{"":""}},{"userguid":"AB92DE99-D0D5-4081-802C-2E331F88AE84","sessguid":"AEA0774B-8CCE-4CB1-A6F8-484ADA1FB45F","transguid":"","ret_code":"ok","ret_mess":"","rec_guid":"91158CB4-C93B-4440-BAA4-771E9493EEA9","parent_guid":"F6FB6DAA-F6D9-43B0-88FD-688BEC0EAF32","ElementName":"Final Billing","elementtype":"","elementsource":"","onload":"","sequence":"4","isPublic":"0","attributes":{"":""}}

我嘗試這樣做，但這不是： -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

    <div style="margin: 20px auto; width: 500px;"> 
    <form border="1" cellpadding="5" id="jsonTable" style="border-collapse: collapse;"> 
</form> 
    </div> 
    <script type="text/javascript"> 

    function addAllColumnHeaders(myList) { 
    var columnSet = []; 
    var headerTr$ = $('<tr/>'); 
    for (var i = 0; i < myList.length; i++) { 
    var rowHash = myList[i]; 
    for (var key in rowHash) { 
    if ($.inArray(key, columnSet) == -1) { 
    columnSet.push(key); 
    headerTr$.append($('<th/>').html(key)); 
    } 
    } 
    } 
$("#jsonTable").append(headerTr$); 
return columnSet; 
} 

$.getJSON("demo.json", function (data) { 
var columns = addAllColumnHeaders(data); 
for (var i = 0; i < data.length; i++) { 
    var row$ = $('<tr/>'); 
    for (var colIndex = 0; colIndex < columns.length; colIndex++) { 
    var cellValue = data[i][columns[colIndex]]; 
    if (cellValue == null) { cellValue = ""; } 
    row$.append($('<td/>').html(cellValue)); 
    } 
    $("#jsonTable").append(row$); 
    } 
});

我想根據JSON數組元素類型來創建HTML。如果類似的元素類型是表單然後html創建表單，如果元素類型是選項卡，然後創建選項卡。

來源

2015-10-20 Renu Thakur

不錯，但在這個網站上，人們幫助解決你現有的代碼問題，而不是從頭開始編寫代碼。閱讀關於js和html的教程 –

for (var i = 0; i < data.length; i++) { 
if (data[i].elementtype === "Form" { 
     //build form here 
    } 
    if (data[i].elementtype === "tab" { 
      var columns = addAllColumnHeaders(data); 
      //etc 
     } 
}

來源

2015-10-20 10:22:38 lucas

從json文件讀取數據並創建html文件

回答

相關問題