javascript - 使用 for 循环解析 JavaScript 中的 JSON

Question

A]问题摘要:

我有 JSON 数据从 python 返回到 javascript。我想遍历 JSON 结构并在 html 表中打印数据元素。

B] 代码摘录:

1] 从 python 返回 JSON --

{'data_for_users_city': 
 '[
    {"city": 
            {"city_name": "Boston", 
             "country": {"country_name": "United States"}
            },
            "status": true, 
            "date_time": {"ctime": "Thu Apr  7 09:38:00 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 0, "microsecond": 796000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 0, 3, 97, -1], "year": 2011, "epoch": 1302169080.0, "isoformat": "2011-04-07T09:38:00.796000", "day": 7, "minute": 38}
    },
  ]'
}

请注意，这是一个城市，就像这样，JSON 数据中有许多城市元素。

2] 我尝试解析预准备 HTML 表“#datatable_for_current_users”的“tbody”中的数据结构和打印数据元素的 JavaScript 代码

function LoadUsersDatatable(data) {
   var tbody = $("#datatable_for_current_users > tbody").html("");

   for (var i=0; i < data.length; i++) 
    {
      var city = data.data_for_users_city[i];
        var rowText = "<tr class='gradeA'><td>" + city.county.country_name + "</td><td>" + city.city_name + "</td><td>" + city.status + "</td><td>" + city.date_time.ctime + "</td></tr>";

          $(rowText).appendTo(tbody);
 }
}    

我的 javascript 代码遇到的问题是:

1] 我无法在“数据”中找到城市元素的确切长度，因为我不知道 for 循环的上限是多少

2] 我不确定我是否在 for 循环内正确访问“city”变量。

[编辑#1]

根据 Salman 和 Pointy 给出的响应，我必须检查返回 json 数据的 python 代码。经过一些调试，发现 JSON 数据是使用模板返回的，因为模板名称出现在 JSON 数据中。我更改了发送 JSON 的机制，现在返回的 JSON 数据如下

[{"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 1, "status": true, "date_time": {"ctime": "Thu Apr  7 09:38:00 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 0, "microsecond": 796000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 0, 3, 97, -1], "year": 2011, "epoch": 1302169080.0, "isoformat": "2011-04-07T09:38:00.796000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 2, "status": false, "date_time": {"ctime": "Thu Apr  7 09:38:03 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 3, "microsecond": 359000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 3, 3, 97, -1], "year": 2011, "epoch": 1302169083.0, "isoformat": "2011-04-07T09:38:03.359000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 3, "status": true, "date_time": {"ctime": "Thu Apr  7 09:38:08 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 8, "microsecond": 281000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 8, 3, 97, -1], "year": 2011, "epoch": 1302169088.0, "isoformat": "2011-04-07T09:38:08.281000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 4, "status": false, "date_time": {"ctime": "Thu Apr  7 09:38:14 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 14, "microsecond": 578000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 14, 3, 97, -1], "year": 2011, "epoch": 1302169094.0, "isoformat": "2011-04-07T09:38:14.578000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 13, "status": true, "date_time": {"ctime": "Wed Apr 13 01:37:58 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 58, "microsecond": 343000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 37, 58, 2, 103, -1], "year": 2011, "epoch": 1302658678.0, "isoformat": "2011-04-13T01:37:58.343000", "day": 13, "minute": 37}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 14, "status": false, "date_time": {"ctime": "Wed Apr 13 01:38:01 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 1, "microsecond": 78000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 38, 1, 2, 103, -1], "year": 2011, "epoch": 1302658681.0, "isoformat": "2011-04-13T01:38:01.078000", "day": 13, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 23, "status": true, "date_time": {"ctime": "Sun Apr 17 21:24:18 2011", "hour": 21, "isoweekday": 7, "month": 4, "second": 18, "microsecond": 625000, "isocalendar": [2011, 15, 7], "timetuple": [2011, 4, 17, 21, 24, 18, 6, 107, -1], "year": 2011, "epoch": 1303075458.0, "isoformat": "2011-04-17T21:24:18.625000", "day": 17, "minute": 24}}]

我仍在努力围绕这个 json 结构获得 for 循环。

[编辑#2]

经过@Salman 的一些调试和响应后，以下函数完成了这项工作

function LoadUsersDatatable(data) {
                                   var tbody = $("#datatable_for_current_users > tbody").html(""); 
                                   jsonData = jQuery.parseJSON(data);

                                   for (var i = 0; i < jsonData.length; i++) 
                                    {
                                        var citydata = jsonData[i];
                                        var rowText = "<tr class='gradeA'><td>" + citydata.city.country.country_name + "</td><td>" + citydata.city.city_name + "</td><td>" + citydata.status + "</td><td>" + citydata.date_time.ctime + "</td></tr>";
                                        $(rowText).appendTo(tbody);
                                    }

                                }    

我在调试时发现的一个问题是返回的 JSON 是字符串格式，必须转换为 JSON 对象，这是使用 jQuery 完成的。

Answer 1

您似乎正在使用 jQuery。如果您想从 JSON 数据直接生成 HTML，一种简单的解决方案是通过插件使用简单的模板，例如 jQote2 。它提供了一种简单的语法，可以循环访问您的数据。使用 JS 模板还可以更轻松地维护 HTML 结构。