如何将 JSON 数据数组加载到表中？

Question

我只是对使用 jQuery 将数据加载到表中感到困惑。如何正确地将数据加载到表中？只是下面的示例表，它仅使用 for 循环用 JavaScript 编写。我不熟悉使用 jQuery 的 $.each()。

JSON 数组数据：这是 COLUMN：

{
    "data": [
        [
            "ID",
            "TYPE",
            "TOTAL",
            "1 bed room",
            "2 bed room"
        ]
    ]
}

JSON 数组数据：这是数据：

{
    "data": [
        [
            "100",
            "Total Transaction Amount",
            "9812355000",
            "23397000",
            "13976000"
        ],
        [
            "100",
            "No. of units",
            "1268",
            "3",
            "2"
        ],
        [
            "100",
            "(Total sq.ft.)",
            "",
            "",
            ""
        ],
        [
            "100",
            "Avg. price",
            "7738450",
            "7799000",
            "6988000"
        ],
        [
            "100",
            "Avg. sq.ft.",
            "",
            "",
            ""
        ],
        [
            "100",
            "Max. price",
            "25494000",
            "9918000",
            "7318000"
        ],
        [
            "100",
            "Max. sq.ft",
            "",
            "",
            ""
        ],
        [
            "100",
            "Min. price",
            "5904000",
            "6465000",
            "6658000"
        ],
        [
            "100",
            "Min. sq.ft",
            "",
            "",
            ""
        ]
    ]
}

jQuery 脚本：

<script>
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "@Url.Action("FlatType", "Home", new {id = ViewBag.Id})",
                async: true,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (data) {
                    var table = "<tr>";
                    $.each(data.data, function (index, value) {
                        table += "<td>" + value + "</td>";
                        console.log(value);
                    });
                    table += "</tr>";

                    $("#myColumns").html(table);
                }
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "@Url.Action("FlatTypeById", "Home", new {id = ViewBag.Id })",
                async: true,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function (data) {
                    var table = "<tr>";
                    $.each(data.data, function (index, value) {
                        table += "<td>" + value + "</td>";
                        console.log(value);
                    });
                    table += "</tr>";

                    $("#myData").html(table);
                }
            });
        });
    </script>

表：

<table class="table table-bordered">
        <thead id="myColumns"></thead>
        <tbody id="myData"></tbody>
    </table>

示例图片：

See this sample image

Answer 1

首先你不需要使用jQuery.each，其次不需要循环头对象，因为它只包含一个子数组。

标题部分的代码：

success: function (data) {
    // generate the header row
    var row = "<tr><td>" + data.data[0].join("</td><td>") + "</td></tr>";

    // override the current header row
    $("#myColumns").html(row);
}

正文部分代码：

success: function (data) {
    var $body = $("#myData");         // the body element
    $body.empty();                    // empty it

    data.data.forEach(function(sub) { // for each sub-array sub
        // generate the row
        var row = "<tr><td>" + data.data[0].join("</td><td>") + "</td></tr>";
        $body.append(row);            // append it to the body
    });
}

join 连接数组的元素并返回一个字符串，该字符串与作为参数传递的字符串连接：

var arr = ["hello", "nice", "world"];
var str = arr.join("*m*");
console.log(str);

Answer 2

我写了一个函数，parse，它应该可以帮助你开始学习如何编写函数来处理这些类型的数组：

function parse(data) {
    table = "<table>";

    for (var i = 0, len = data.length; i < len; i++) {
        table += "<tr>";
        for (j = 0, len2 = data[i].length; j < len2; j++) {
            table += "<td>" + data[i][j] +  "</td>";
        }
        table += "</tr>";
    }

    table += "</table>";

    return table;
}
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "@Url.Action("FlatType", "Home", new {id = ViewBag.Id})",
        async: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        success: function (data) {

            $("#tableContainer").html(parse(data.data));
        }
    });

或您可以使用 jQuery 版本的代码：

function parse(array) {
    $table = $("<table>");

    $(array).each(function (index, value) {
        $tr = $("<tr>");
        $(value).each(function (index, value) {
            $tr.append($("<td>").html(value));
        });
        $table.append($tr);
    });

    return $table;
}
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "@Url.Action("FlatType", "Home", new {id = ViewBag.Id})",
        async: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        success: function (data) {

            $("#tableContainer").html(parse(data.data));
        }
    });

Answer 3

$.Each，类似于for（或更常见的forEach），是一种循环机制，它使每个循环遍历数组的每个元素。您可以使用任何有意义的循环构造（for、while、reduce、forEach、map）——对于您的数据，$.each 或 forEach 很有意义.

想法

对于您的数据，您将为每个数组创建一个新的表格行（例如，<tr>）。对于该数组的每个值（元素），您将创建一个表头或表数据元素（例如，<th> 或 <td>）。

另一个例子

从您的 AJAX 调用中抽象出来，这是另一种创建标题和数据行的方法，使用 ES6 的 forEach 和 map：

// setup JSON objects
let [column, data] = getJSON();

// Create Table Headers
let $thead = $('#myColumns'),
    $tr = $('<tr>');
column.data[0].forEach(col => {
  $tr.append($('<th>').html(col));
});
$thead.append( $tr );

// Create Table Rows
let $tbody = $('#myData');
data.data.forEach(row => {
  let $tr = $('<tr>');
  $tr.append(row.map(val => {
    return $('<td>').html(val);
  }));
  $tbody.append($tr);
});

function getJSON() {
  let column = {
      "data": [
        [
          "ID",
          "TYPE",
          "TOTAL",
          "1 bed room",
          "2 bed room"
        ]
      ]
    },
    data = {
      "data": [
        [
          "100",
          "Total Transaction Amount",
          "9812355000",
          "23397000",
          "13976000"
        ],
        [
          "100",
          "No. of units",
          "1268",
          "3",
          "2"
        ],
        [
          "100",
          "(Total sq.ft.)",
          "",
          "",
          ""
        ],
        [
          "100",
          "Avg. price",
          "7738450",
          "7799000",
          "6988000"
        ],
        [
          "100",
          "Avg. sq.ft.",
          "",
          "",
          ""
        ],
        [
          "100",
          "Max. price",
          "25494000",
          "9918000",
          "7318000"
        ],
        [
          "100",
          "Max. sq.ft",
          "",
          "",
          ""
        ],
        [
          "100",
          "Min. price",
          "5904000",
          "6465000",
          "6658000"
        ],
        [
          "100",
          "Min. sq.ft",
          "",
          "",
          ""
        ]
      ]
    };
  return [column, data];
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead id="myColumns"></thead>
  <tbody id="myData"></tbody>
</table>

AJAX

如果您想包含 AJAX，则相同的示例（无需调整大部分原始内容）可能类似于：

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: '@Url.Action("FlatType", "Home", new {id = ViewBag.Id})',
    async: true,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    success: function(data) {
      // Create Table Headers
      let $thead = $('#myColumns'),
          $tr = $('<tr>');

      data.data[0].forEach(col => {
        $tr.append($('<th>').html(col));
      });

      $thead.append($tr);
    }
  });
  $.ajax({
    type: "POST",
    url: '@Url.Action("FlatTypeById", "Home", new {id = ViewBag.Id })',
    async: true,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    success: function(data) {
      // Create Table Rows
      let $tbody = $('#myData');
      data.data.forEach(row => {
        let $tr = $('<tr>');
        $tr.append(row.map(val => {
          return $('<td>').html(val);
        }));
        $tbody.append($tr);
      });
    }
  });
});