为json对象创建动态表

Question

这里我有一个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"
        }
      ] 
    }
  ]
}

Answer 1

带有示例的小提琴（除了getJson，我使用html的解析进行视觉测试）： http : //jsfiddle.net/Lpj5203v/2/

您的答案：第一-您的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>

PS另外，您在js，html，json中有很多语法错误-尝试更注意错误控制台日志

PPS

a += b

一样是

a = a + b

但是a += a + b += c是语法错误！

Answer 2

从调试的角度来看，您可以尝试将JSON对象转储到Web控制台并运行该站点。 控制台（通过大多数浏览器通过F12访问）是否显示您试图放入该表的预期数据？ 这只是一个好习惯，可以帮助您了解错误并更有效地找到解决方案。

我对此的直觉是，您可能需要在JSON对象上使用.stringify函数，才能在HTML中使用JSON字段。

为json对象创建动态表

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-04-03 13:29:01

解决方案2
0 2015-04-03 13:33:21

为json对象创建动态表

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-04-03 13:29:01

解决方案2 0 2015-04-03 13:33:21

解决方案1
2 已采纳 2015-04-03 13:29:01

解决方案2
0 2015-04-03 13:33:21