Javascript 为json对象创建动态表_Javascript_Json

Javascript 为json对象创建动态表

javascript json

Javascript 为json对象创建动态表,javascript,json,Javascript,Json,这里我有一个json对象，列表中有一些元素，所以我想为该对象创建一个动态表，这意味着如果我生成一个新的json对象，该表将在以后刷新。但是现在，我无法将json对象列表发送到表中，不知道为什么。我是json新手，谢谢 <html> <head> <title>Generate your own query</title> <script type="text/javascript" src="http://ajax.googleap

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

这个例子很麻烦（除了getJson，我使用html解析进行可视化测试）：

你的答案是：首先-如果json结果中有错误，请查看：

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

在

jd.list\u查询[1]

-u哈希键中缺少“\u”

下面是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>

另外，你在js、html、json中有很多语法错误——请注意你的错误控制台日志

p.p.S

a += b

同样是

a = a + b

但是

a+=a+b+=c

-是语法错误

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

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

你有一些

+=

，我想你的意思是

，我猜

tabledata.innerHTML=tabledata

是指

table.innerHTML=tabledata首先看看你的js控制台，修复所有语法错误。我终于解决了！等待ansTy帮助我提高ans的质量！现在我在等待OP：有帮助吗？如果没有-我试着写一些更容易理解的东西，并用ur jsonEmm创建了一个例子，它直到现在都无法工作，试着找出它。仍然感谢您的帮助~~我不确定我们是否真的通过var$tbody=$（“#usertable tbody”）获得了表体；我们做了，我确定，我试着为你创造小提琴-请等待。“任务id”：3-你必须用“uu”而不是空格来更改所有键@rockmerockmeIt是这样的，不是meta。当你在这里问——你想要的是代码，而不是理论（我的观点），有时教一个人钓鱼比简单地给他们一条鱼更好。（我的观点）。我喜欢你的观点，但人们都想回答）我自己知道，当我学习scala的时候
<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

a += b 

a = a + b