使用for循环在JavaScript中解析JSON

| 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”的“正文”中打印数据元素的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]我无法在\“ data \”中找到城市元素的确切长度，因此我不知道for循环的上限是多少 2]我不确定我是否在for循环中正确访问\“ city \”变量。 [EDIT＃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循环。 [EDIT＃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完成的。

已邀请:

4 个回复

掀辟髓观粟

奇怪，似乎seems4 not不是和数组而是一个字符串。我希望这不是拼写错误或复制/粘贴错误。编辑1 即使将其视为字符串，您的JSON仍然有错误。在JavaScript中，引号内的换行符是不允许的，您必须将其替换为\\n，使用+串联运算符或使用\\将字符串拆分为多行。如果您设法解决这些问题，可以执行以下操作：

var data_for_users_city = eval(data.data_for_users_city);
// sometimes adding extra parenthesis help
// var data_for_users_city = eval(\'(\' + data.data_for_users_city + \')\');
alert(data_for_users_city.length);

编辑2 这是我在FireFox / Firebug控制台中创建并测试的快速而肮脏的演示。它基本上演示了如何访问JSON中的三个数据级别。为了正确地可视化JSON数据，请复制以下代码并粘贴到jsbeautifier中。

var data = [{\"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}}];
var table = $(\"<table border=\'1\'/>\");
var thead = $(\"<thead/>\")
    .appendTo(table);
$(\"<tr/>\")
    .append(\"<th>Country</th>\")
    .append(\"<th>City</th>\")
    .append(\"<th>Status</th>\")
    .append(\"<th>Time</th>\")
    .appendTo(thead);
var tbody = $(\"<tbody/>\")
    .appendTo(table);
for (var i = 0; i < data.length; i++) {
    var citydata = data[i];
    $(\"<tr/>\")
        .append(\"<td>\" + citydata.city.country.country_name + \"</td>\")
        .append(\"<td>\" + citydata.city.city_name + \"</td>\")
        .append(\"<td>\" + citydata.status + \"</td>\")
        .append(\"<td>\" + citydata.date_time.ctime + \"</td>\")
        .appendTo(tbody);
}
//
// FOR TESTING
//
$(\"body\").append(table);