如何使用$ .each()迭代json数组?

时间:2017-03-14 08:27:10

标签: javascript jquery json

如何使用$ .each()迭代JSON数组。我的示例数据是动态的,它根据从服务器解析的数据进行更改。所以我的计划就像在图像上一样格式化数据,但我没有得到它。我使用javascript正常工作,但我需要使用jQuery Ajax。

enter image description here

TestIdentifier#getUniqueId()

在做测试或示例时。

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

1 个答案:

答案 0 :(得分:1)

请参阅下面的示例并附上您的数据

&#13;
&#13;
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 );
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;