如何使用 $.each() 迭代 json 数组？答案

【问题标题】：How to iterate json array using $.each()?如何使用 $.each() 迭代 json 数组？
【发布时间】：2017-03-14 16:49:08
【问题描述】：

如何使用 $.each() 迭代 JSON 数组。我的示例数据是动态的，它根据从服务器解析的数据而变化。所以我计划像在图像上一样格式化数据，但我不明白。我使用正常工作的 javascript，但我需要使用 jQuery Ajax 来代替。

<script>
        var columns = {
            "data": [
                [
                    "ID",
                    "TYPE",
                    "TOTAL",
                    "1 bed room",
                    "2 bed room"
                ]
            ]
        };

        var testdata = {
            "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",
                    "",
                    "",
                    ""
                ]
            ]
        };

        var dynamicColumn = "", dynamicHeader = "";
        dynamicHeader += "<tr>";
        for (i = 0; i < columns.data[0].length; i++) {
            dynamicHeader += "<td>" + columns.data[0][i] + "</td>";
            console.log(columns.data[i]);
        }
        dynamicHeader += "</tr>";
        console.log(dynamicHeader);

        for (i = 0; i < testdata.data.length; i++) {
            var row = testdata.data[i];
            console.log(testdata.data[i]);
            dynamicColumn += "<tr>";

            for (ii = 0; ii < row.length; ii++) {
                dynamicColumn += "<td>" + (row[ii] === "" ? "0" : row[ii]) + "</td>";
                console.log(row);
            }

            dynamicColumn += "</tr>";
        }

        $('#thead').html(dynamicHeader);
        $('#tbody').html(dynamicColumn);

    </script>

在进行测试或示例时。

 $.each(data,
                        function (key, value) {
                            console.log(key);
                            console.log(value[0]);
                            console.log(value[1]);
                            console.log(value[2]);
                            console.log(value[3]);
                            console.log(value[4]);
                        });

【问题讨论】：

JQuery $.each() JSON array object iteration的可能重复
$.each(data,... 你甚至没有一个名为data的变量
没有"json array"这样的东西。

标签： javascript jquery json

【解决方案1】：

请参阅下面的示例以及您的数据

var testdata = {
  "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",
      "",
      "",
      ""
    ]
  ]
};

/**
 * Simple iterator
 */
$.each(testdata.data, function( index, value ) {
  alert( index + ": " + value );
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：