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

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

javascript jquery json

Javascript 如何将JSON数据数组加载到表中？,javascript,jquery,json,Javascript,Jquery,Json,我只是在使用jQuery将数据加载到表中时感到困惑。如何正确地将数据加载到表中？下面的示例表仅使用for循环用JavaScript编写。我不熟悉使用jQuery的$.each（） JSON数组数据：这是列： { "data": [ [ "ID", "TYPE", "TOTAL", "1 bed room", "2 bed room" ]

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

JSON数组数据：这是列：

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


$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
url:“@url.Action（“FlatType”，“Home”，新的{id=ViewBag.id}）”，
async:true，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
cache:false，
成功：功能（数据）{
var表=”；
$.each（data.data，函数（索引，值）{
表+=“”+值+“”；
console.log（值）；
});
表+=”；
$（“#myColumns”）.html（表格）；
}
});
});
$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
url:“@url.Action（“FlatTypeById”，“Home”，新的{id=ViewBag.id}）”，
async:true，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
cache:false，
成功：功能（数据）{
var表=”；
$.each（data.data，函数（索引，值）{
表+=“”+值+“”；
console.log（值）；
});
表+=”；
$（“#myData”）.html（表格）；
}
});
});

表:

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

示例图像：

我编写了一个函数，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));
        }
    });

函数解析（数据）{
表=”；
对于（变量i=0，len=data.length；i


或您可以使用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));
        }
    });

函数解析（数组）{
$table=$（“”）；
$（数组）.each（函数（索引、值）{
$tr=$（“”）；
$（值）。每个（函数）（索引，值）{
$tr.append（$（“”）.html（value））；
});
$table.append（$tr）；
});
返回$table；
}
$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
url:“@url.Action（“FlatType”，“Home”，新的{id=ViewBag.id}）”，
async:true，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
cache:false，
成功：功能（数据）{
$（“#tableContainer”）.html（parse（data.data））；
}
});
首先，您不需要使用jQuery。其次，每个，都不需要在header对象上循环，因为它只包含一个子数组
标题部分的代码：
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);
}

$。每个
，类似于
的
（或者更常见的是

forEach），是一种循环机制，使每个元素在数组的每个元素上循环。您可以使用任何有意义的循环构造（

for

，

while

，

reduce

，

forEach

，

映射

）--对于您的数据，

$。每个

或

forEach

都很有意义

想法对于数据，您将为每个数组创建一个新的表行（例如，

）。对于该数组的每个值（元素），您将创建一个表头或表数据元素（例如，

或

）

另一个例子从AJAX调用中抽象出来，这里有另一种创建标题和数据行的方法，使用ES6的

forEach

和

map

：

//设置JSON对象
让[column，data]=getJSON（）；
//创建表格标题
设$thead=$（“#myColumns”），
$tr=$（''）；
column.data[0]。forEach（col=>{
$tr.append（$（''）.html（col））；
});
$thead.append（$tr）；
//创建表行
让$tbody=$（“#myData”）；
data.data.forEach（行=>{
设$tr=$（''）；
$tr.append（row.map）（val=>{
返回$（''）.html（val）；
}));
$tbody.append（$tr）；
});
函数getJSON（）{
让列={
“数据”：[
[
“身份证”，
“类型”，
“总数”，
“一间卧室”，
“2间卧室”
]
]
},
数据={
“数据”：[
[
"100",
“总交易金额”，
"9812355000",
"23397000",
"13976000"
],
[
"100",
“单位数量”，
"1268",
"3",
"2"
],
[
"100",
“（总平方英尺）”，
"",
"",
""
],
[
"100",
“平均价格”，
"7738450",
"7799000",
"6988000"
],
[
"100",
“平均平方英尺”，
"",
"",
""
],
[
"100",
“最高价格”，
"25494000",
"9918000",
"7318000"
],
[
"100",
“最大平方英尺”，
"",
"",
""
],
[
"100",
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
    });
}