Jquery .getJSON() 数组作为表答案

【问题标题】：Jquery .getJSON() array as TableJquery .getJSON() 数组作为表
【发布时间】：2017-12-11 12:25:36
【问题描述】：

我目前正在处理一个使用 jQuery 将查询发送到服务器并且返回的响应是一个数组的项目。但是，我无法将接收到的数据发送到动态表，因为查询之间的列数可能不同。到目前为止，我有以下内容，但似乎无法将数组解析到表中：

<script>
var my_array;
$.getJSON("sql_query.php", // The server URL 
    { id: "sewer_pipelines" },
    function(json) {
    my_array = json;
    });

function generate_table() {
    // Create a HTML Table element.
    var table = document.createElement("TABLE");
    table.border = "1";

    // Get a column count
    var column_count = my_array[0].length;

    // Add header row
    var row = table.insertRow(-1);
    // Creates a loop 
    for (var i = 0; i < column_count; i++) {
        row = table.insertRow(-1);
        for (var j = 0; j < column_count; j++);
            var cell = row.insertCell(-1);
            cell.innerHTML = my_array[i][j];
    }

    var array_table = document.getElementById("array_table");
    array_table.innerHTML = "";
    array_table.appendChild(table);
};
</script>

<html>
    <input type="button" value="Generate Table" onclick="generate_table()" />  
    <div id="array_table"></div>
</html>

返回的数组格式为：

[{"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"},
{"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"},
{"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"}]

将数组变量放入第二个函数是否可行，还是我完全走错了轨道？

【问题讨论】：

请添加返回数组的示例。

标签： javascript php jquery arrays ajax

【解决方案1】：

由于您已经在使用 jQuery，您可以尝试这种方法：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<script>
  var my_array = [
   {"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"},
   {"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"},
   {"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"}
  ];

  function generate_table() {
    // Create a HTML Table element.
    var table = $("<table border='1'></table>");

    table.append($("<tr><th>GID</th><th>ID</th><th>Layer</th>"))
    for (var i = 0; i < my_array.length; i++) {
      table.append($("<tr><td>" + my_array[i]['gid'] + "</td><td>" + my_array[i]['id'] + "</td><td>" + my_array[i]['layer'] + "</td>"))
    }

    $("#array_table").html('')
    $("#array_table").append(table);
  };
</script>
<input type="button" value="Generate Table" onclick="generate_table()" />
<div id="array_table"></div>

</html>

【讨论】：

【解决方案2】：

var response = [{
      "name":"john",
       "age":"6"
     },
     {
       "name":"jack",
       "age":"6"
    
    }];

$.each(response, function(i, item) {
    $('<tr>').html(
        "<td>" + response[i].name + "</td><td>" +                           response[i].age + "</td><td>"
        ).appendTo('#data');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data"></table>

【讨论】：

【解决方案3】：

在这里，我修复了你的代码。

<script>
      var my_array = [
          {"gid":"2","id":"BOS_SE0131","layer":"BOS_SE0131"},
          {"gid":"3","id":"BOS_SE0130","layer":"BOS_SE0130"},
          {"gid":"4","id":"BOS_SE0133","layer":"BOS_SE0133"}
        ];
      var newArray = my_array.map((x) => [x.gid, x.id, x.layer]);
      console.log(newArray[0][1]);
      function generate_table()
      {
          // Create a HTML Table element.
          var table = document.createElement("TABLE");
          table.border = "1";

          // Get a column count
          var column_count = newArray[0].length;
          var row_count = newArray.length;
          // Add header row
          var row = table.insertRow(0);
          row.insertCell(-1).innerHTML = "gid";
          row.insertCell(-1).innerHTML = "id";
          row.insertCell(-1).innerHTML = "layer";
          // Creates a loop
          for (var i = 0; i < row_count; i++)
          {
              row = table.insertRow(table.rows.length);
              for(var j = 0; j < column_count; j++)
              {
                  var cell = row.insertCell(row.cells.length);
                  cell.innerHTML = newArray[i][j];
              }
          }

          var array_table = document.getElementById("array_table");
          array_table.innerHTML = "";
          array_table.appendChild(table);
      };
      </script>
    <input type="button" value="Generate Table" onclick="generate_table()" />
    <div id="array_table"></div>

【讨论】：

感谢大家的帮助。但是，我可以对列标题值进行硬编码。我的问题是我希望标题是动态的（即：这些标题在表之间会有所不同），以便脚本可用于从站点请求的所有 json 数组查询，而不是仅限于单个查询。