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中的parse进行视觉测试）：http://jsfiddle.net/Lpj5203v/2/

你的回答是：首先 - 你的json结果有误，看：

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

在jd.list_of_queries[1] - 你想念＆＃39; _＆＃39;在哈希的键中。

带答案的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>

P.S。此外，你在js，html，json中有很多语法错误 - 试着更加关注你的错误控制台日志

P.P.S

a += b

同样是

a = a + b

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

Answer 2

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

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

为json对象创建一个动态表

2 个答案: