How to iterate json array using $.each()?

Question

how to iterate a JSON array using $.each(). My example data is dynamic which is changing base on the data that parse from the server. So my plan to format the data just like on the image but I don't get it. I use javascript which works properly but I need to use jQuery Ajax instead.

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

While doing testing or example.

 $.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]);
                        });

Possible duplicate of [JQuery $.each() JSON array object iteration](http://stackoverflow.com/questions/6298599/jquery-each-json-array-object-iteration) — Koby Douek, Mar 14 '17 at 08:28
`$.each(data,...` you do not even have a variable named `data` — Weedoze, Mar 14 '17 at 08:31
There is no such thing as a ["json array"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/). — Fabian Klötzl, Mar 14 '17 at 08:40

Kas Elvirov · Answer 1 · 2017-03-14T08:49:08.167

See example below with your data

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 );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to iterate json array using $.each()?

1 Answers1