Question

我需要有关如何从html中从API服务器获取数据创建表的帮助。

的可能副本

我需要从url请求json数据，然后使用该数据在html中动态创建表。

以下是我的test.html

<!DOCTYPE html>
<html>
<head>
...
...
</head>
<body>
...
...
...
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
              <h3 class="box-title">Activity</h3>
            </div>
            <div id = "showData" class="box-body"></div>
        </div>
     </div>
 </div>

<script src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../static/plugins/jQueryUI/jquery-ui.min.js"></script>

<script>
  $.ajax({
    url: "http://127.0.0.1:4220/pipeline/v1/bpwi/",
    success: function (data) {
      var col = [];
      for (var i = 0; i < data.length; i++) {
        for (var key in data[i]) {
          if (col.indexOf(key) === -1) {
            col.push(key);
          }
        }
      }

      var table = document.createElement("table");

      var tr = table.insertRow(-1);

      for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");
        th.innerHTML = col[i];
        tr.appendChild(th);
      }

      for (var i = 0; i < data.length; i++) {
        tr = table.insertRow(-1);
        for (var j = 0; j < col.length; j++) {
          var tabCell = tr.insertCell(-1);
          tabCell.innerHTML = myBooks[i][col[j]];
        }
      }

      var divContainer = document.getElementById("showData");
      divContainer.innerHTML = "";
      divContainer.appendChild(table);
    }
  })
</script>
</body>
</html>

预期的ajax响应是这样的

[
        {
            "ID": "1",
            "Name": "Computer",
            "Category": "Computers",
            "Price": "125.60"
        },
        {
            "ID": "2",
            "Name": "Blue",
            "Category": "Sport",
            "Price": "56.00"
        },
        {
            "ID": "3",
            "Book Name": "Science",
            "Category": "Science",
            "Price": "210.40"
        }
    ]

我已多次刷新浏览器，但效果不佳。

结果如下

-----------------------------------------------------------------
Activity
-----------------------------------------------------------------
0
[
{
"
I
D
"
:
"
1
"
...
...

我是javascript的新手，我发现的一些好例子是我上面发布的可能问题和here，但两者都没有显示如何实现http request获取数据的明确示例来自外部来源。

我真的希望有人能指出我在这段代码中做错了什么。感谢您的帮助和建议。

无法使用ajax请求从api数据创建html中的表

0 个答案: