Question

你好我是jquery和json文件的新手，我想从json文件创建html文件。从.json文件读取第一个数据然后在json对象的基础上创建html文件我的json数据是： -

   {"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创建表单，如果元素类型是制表符，则创建制表符。

Answer 1

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
        }
}

从json文件中读取数据并创建html文件

1 个答案: