jQuery .getJSON（）数组作为表

I am currently working with a project where a query is sent to a server using jQuery and the response returned is an array. I am however getting stuck with being able to send the received data to a dynamic table as the column count may differ between queries. So far I have the following but cant seem to parse the array to the table:

<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>

The array returned is in the format:

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

Would getting the array variable into the second function work or am I on the completely wrong track?

As you are using jQuery already, you can try this approach:

<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>

</div>

Here, I fixed your code.

enter image description here

<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>


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>

</div>