爲json對象創建一個動態表

這裏我有一個json對象，其中一些元素在列表中，所以我想爲這個對象創建一個動態表，這意味着如果我生成一個新的json對象，表將會是稍後刷新。但現在，我無法將json對象列表發送到表中，不知道爲什麼。我是json的新手，謝謝。爲json對象創建一個動態表

<html> 
<head> 
    <title>Generate your own query</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">      </script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
    $("#driver").click(function(event){ 
     $.getJSON('result.json', function(jd) { 
     $('#stage').append('<p> Queries: ' + jd.queries_status+ '</p>'); 
     $('#stage').append('<p> Queries: ' + jd.list_of_queries[0].query_id+ '</p>'); 

     var table = document.getElementById("usertable"); 
     var tabledata = ""; 
     for(i=0;i<jd.list_of_queries.length;i++){ 
     tabledata += "<tr>"; 
     tabledata += "<td>" + jd.list_of_queries[i].query_id += "</td>"; 
     tabledata += "<td>" + jd.list_of_queries[i].query_status += "</td>"; 
     tabledata += "</tr>"; 
     } 
     tabledata.innerHTML= tabledata; 
    ); //.appendTo('#records_table'); 
    console.log($tr.wrap('<p>').html()); 
    }); 
    }); 

     }); 
    }); 
}); 
</script> 
    </head> 
    <body> 
    <p>Generate your own query</p> 
    <div id="stage" > 
    Query <input type="text" name="query" size="50"> 
    </div> 
</br> 
    <table id="usertable" border="1" cellpadding="5" cellspacing=0> 
    <tbody> 
    <tr> 
     <th>query_id</th> 
     <th>query_status</th> 
    </tr> 
    </tbody> 
    </table> 
    </br> 

    <input type="button" id="driver" value="submit query" /> 
    <form> 
    <input type="submit" id="submit" value="go back"formaction="http://localhost/queryexample.html" > 
    </form>

result.json

{ 
    "queries_status": "under process", 
    "list_of_queries": 
    [ 
    { 
     "query_id": 1, 
     "query_status": "under finished", 
     "query_results number": "2", 
     "detailed query results" : 
     [ 
     { "result 1":"string 1" }, 
     { "result 2":"string 2" } 
     ], 
     "tasks_number" : 3, 
     "list of tasks": 
     [ 
     { 
      "task id" :1, 
      "task status": "finished", 
      "task operation": "JOIN", 
      "number of hits": 4, 
      "finished hits":4, 
      "task result number": "5" 
     }, 
     { 
      "task id" :2, 
      "task status": "finished", 
      "task operation": "SELECT", 
      "number of hits": 5, 
      "finished hits":5, 
      "task result number": "3" 
     }, 
     { 
      "task id" :3, 
      "task status": "finished", 
      "task operation": "GROUPBY", 
      "number of hits": 5, 
      "finished hits":5, 
      "task result number": 2 
     } 
     ] 
    }, 
    { 
     "query id": 2, 
     "query status": "under process", 
     "query results number": null, 
     "detailed query results": 
     [ 
     null 
     ], 
     "tasks number" : 2, 
     "list of tasks": 
     [ 
     { 
      "task id" :1, 
      "task status": "finished", 
      "task operation": "JOIN", 
      "number of hits": 4, 
      "finished hits":3, 
      "task result number": "5" 
     }, 
     { 
      "task id" :2, 
      "task status": "under process", 
      "task operation": "GROUPBY", 
      "number of hits": 5, 
      "finished hits":0, 
      "task result number": "null" 
     } 
     ] 
    } 
    ] 
}

來源

2015-04-03 rockmerockme

你有一些'+ ='，我認爲你的意思只是'+'，我猜'tabledata.innerHTML = tabledata; '是爲了'table.innerHTML = tabledata;' – 2015-04-03 13:38:47

首先看看你的js控制檯並修復所有的語法錯誤。 – 2015-04-03 13:39:51

我終於解決了！等待回答 – Legendary 2015-04-03 14:26:33

與實施例即小提琴（除的getJSON我使用解析從HTML視覺測試）：http://jsfiddle.net/Lpj5203v/2/

即烏爾答案： FIRST - 你的json結果有錯誤，請看：

"query id": 2, 
"query status": "under process", 
"query results number": null,

jd.list_of_queries[1] - 你錯過了哈希鍵中的'_'。

與答案的javascript：

<script type='text/javascript'> 
    $(document).ready(function() { 
    $("#driver").click(function(){ 
     $.getJSON('result.json', function(jd) { 
     $('#stage').append('<p> Queries: ' + jd.queries_status+ '</p>'); 
     $('#stage').append('<p> Queries: ' + jd.list_of_queries[0].query_id+ '</p>'); 
     var $tbody = $("#usertable tbody"); 
     var tabledata = ""; 
     for(var i = 0; i < jd.list_of_queries.length; i++){ 
      tabledata = ""; 
      tabledata += "<tr>"; 
      tabledata += "<td>" + jd.list_of_queries[i].query_id + "</td>"; 
      tabledata += "<td>" + jd.list_of_queries[i].query_status + "</td>"; 
      tabledata += "</tr>"; 
      $tbody.append(tabledata); 
     } 
     }); 
    }); 
    }); 
</script>

，也是我解決您的HTML有效：

<p>Generate your own query</p> 
    <div id="stage"> 
     Query <input type="text" name="query" size="50" /> 
    </div> 
     <br /> 
    <table id="usertable" border="1" cellpadding="5" cellspacing='0'> 
    <thead> 
     <tr> 
     <th>query_id</th> 
     <th>query_status</th> 
    </tr> 
    </thead> 
     <tbody></tbody> 
    </table> 
<br />

記住：

沒有</br>，但<br />
總是關閉input和img標籤由<input /> <img />

表結構爲：

<table> 
    <thead> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

附：此外，u有在JS很多語法錯誤，HTML，JSON - 儘量更加關注你的錯誤控制檯日誌

PPS

a += b

同樣是

a = a + b

但a += a + b += c - 語法錯誤！

來源

2015-04-03 13:29:01 Legendary

即時投票，等待 – Legendary 2015-04-03 13:29:56

你做了什麼？請解釋你的答案:) – A1rPun 2015-04-03 13:30:07

@ A1rPun編輯我的答案，現在可以嗎？ – Legendary 2015-04-03 13:33:22

從調試的角度來看，您可以嘗試將JSON對象轉儲到Web控制檯並運行該站點。控制檯（通過大多數瀏覽器的F12訪問）是否顯示了您試圖將該數據放入該表中的預期數據？這只是幫助您理解錯誤並更有效地找到解決方案的良好實踐。

我的這個預感是你可能需要在JSON對象上使用.stringify函數才能在HTML中使用JSON字段。

來源

2015-04-03 13:33:21

它是這樣，而不是元。當你在這裏問 - 你想要的代碼，而不是理論（我的意見） – Legendary 2015-04-03 13:41:44

有時教一個人釣魚，他們生活得更好，然後簡單地交給他們一條魚。（我的想法）。 – 2015-04-03 14:00:19

我喜歡你的意見，但在所以人們想要回答）我知道它爲我自己，當我學習斯卡拉 – Legendary 2015-04-03 14:01:19

爲json對象創建一個動態表

回答

相關問題