Javascript 使用HTML将JSON数据转换为动态表_Javascript_Jquery_Json_Dynamic_Html Table

Javascript 使用HTML将JSON数据转换为动态表

javascript jquery json dynamic

Javascript 使用HTML将JSON数据转换为动态表,javascript,jquery,json,dynamic,html-table,Javascript,Jquery,Json,Dynamic,Html Table,我四天来一直在寻找解决问题的办法，但我还是解决不了我想使用JQuery和JavaScript将JSON字符串数据（从URL）转换为动态表我必须使用jQuery.getJSON（）函数加载JSON字符串。我不知道如何把这两件事结合起来我一直在寻找，但我仍然不明白。对不起，如果我听起来真的很蠢，但我就是不能把它说出来。有人能帮我吗这是我的代码： <html> <head> <h1> Inventory List </h1> <scrip

我四天来一直在寻找解决问题的办法，但我还是解决不了

我想使用JQuery和JavaScript将JSON字符串数据（从URL）转换为动态表

我必须使用

jQuery.getJSON（）

函数加载JSON字符串。我不知道如何把这两件事结合起来

我一直在寻找，但我仍然不明白。对不起，如果我听起来真的很蠢，但我就是不能把它说出来。有人能帮我吗

这是我的代码：

<html>
<head>
<h1> Inventory List </h1>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://wt.ops.few.vu.nl/api/--------"></script>
</head>

<body>
<script>
$(document).ready(function () {
    $.getJSON(http://wt.ops.few.vu.nl/api/-------,
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].category + "</td>");
            tr.append("<td>" + json[i].name + "</td>");
            tr.append("<td>" + json[i].amount + "</td>");
            tr.append("<td>" + json[i].location + "</td>");
            tr.append("<td>" + json[i].date + "</td>");
            $('#table').append(tr);
        }
    });
});

</script>

<table id= "table">
  <tr>
    <th> Name of product</th>
    <th> Category</th>
    <th> Amount</th>
    <th> Location</th>
    <th> Date</th>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td> 
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td> 
    <td> </td>
  </tr>
</table>
    </body>
    </html>


库存清单
$（文档）.ready（函数（）{
$.getJSON(http://wt.ops.few.vu.nl/api/-------,
函数（json）{
var-tr；
for（var i=0；i

这应该行得通
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
<h1> Inventory List </h1>
<script>
$(document).ready(function () {
    $.getJSON('http://wt.ops.few.vu.nl/api/--------',
    function (json) {
        var tr;
        for (var i = 0; i < json.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + json[i].category + "</td>");
            tr.append("<td>" + json[i].name + "</td>");
            tr.append("<td>" + json[i].amount + "</td>");
            tr.append("<td>" + json[i].location + "</td>");
            tr.append("<td>" + json[i].date + "</td>");
            $('#table').append(tr);
        }
    });
});

</script>

<table id= "table">
  <tr>
    <th> Name of product</th>
    <th> Category</th>
    <th> Amount</th>
    <th> Location</th>
    <th> Date</th>
  </tr>

</table>
</body>
</html>


库存清单
$（文档）.ready（函数（）{
$.getJSON（'http://wt.ops.few.vu.nl/api/--------',
函数（json）{
var-tr；
for（var i=0；i
我建议像这样使用JSONP：
使用$。each（）
只是处理对象数据的一种更快的方法。您的for（）
循环没有问题，可能会根据您的需要工作得更好。
wt.ops.now.vu.nl是您的域吗？如果不是，则必须使用jsonp而不是json。欢迎使用堆栈溢出。你的代码看起来很好。您会遇到什么错误，或者什么具体的错误不起作用？另外，您可能希望包含一些可用于测试的示例JSON数据。我也看到了语法问题：.getJSON（'s）http://wt.ops.few.vu.nl/api/--------，函数（json）{}必须包装URL引号。非常感谢您的回答！！我终于明白了如何使用append创建一个表，而不是在表中创建空的“框”。非常感谢您的回答！我发现我问题的第一个答案更容易理解（因为我对网络技术缺乏洞察力），但非常感谢您的帮助。@Webstudent很高兴听到这个消息。如果你愿意，你应该把其中一个标为答案，或者投赞成票。
$(document).ready(function() {

  getData();

  function getData() {
    $.ajax({
      url: 'https://jsfiddle.net/echo/jsonp/',
      method: 'GET',
      dataType: "jsonp",
      error: function(xhr, status, error) {
        console.log(status, error);
      },
      success: function(json) {
        var tr;
        $.each(json, function(k, v) {
          tr = $("<tr></tr>");
          tr.append("<td>" + v.name + "</td>");
          tr.append("<td>" + v.category + "</td>");
          tr.append("<td>" + v.amount + "</td>");
          tr.append("<td>" + v.location + "</td>");
          tr.append("<td>" + v.date + "</td>");
          $("#invList").append(tr);
        });
      }
    });
  }
});

[{"category": "Fruit", "name": "Banana", "amount": 15, "location": "Amsterdam", "date": "2014-10-05", "id": 13844}, {"category": "Fruit", "name": "Apple", "amount": 58, "location": "Amsterdam", "date": "2014-02-05", "id": 13845}, {"category": "Furniture", "name": "Chair", "amount": 3, "location": "Hilversum", "date": "2014-12-10", "id": 13846}, {"category": "Furniture", "name": "Table", "amount": 5, "location": "Rotterdam", "date": "2011-07-13", "id": 13847}]