2011-04-19 19 views
0

A]問題摘要:解析JSON在JavaScript使用用於循環

我已經從蟒返回到JavaScript的JSON數據。我想穿過JSON結構並在html表格中打印數據元素。

B]代碼摘錄:從蟒被返回

1] 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]的Javascript代碼,我試圖在預先準備的HTML表格的「TBODY」解析通該數據結構和打印數據元素「#datatable_for_current_users」

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]我不知道我是否正在訪問「城市」VA for循環內正確rible。

[EDIT#1]

基於由Salman和尖給出的響應,我不得不檢查這是返回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結構循環。

[編輯#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完成的。

+1

解析您發佈的代碼時,出現「未終止的字符串文字」錯誤。這是一個複製粘貼錯誤? – 2011-04-19 12:09:56

+2

這不是JSON。 http://jsonlint.com/(你可能希望data_for_users_city的值是一個數組,而不是一個字符串) – Quentin 2011-04-19 12:11:15

+2

正如@David Dorward所說,你的「JSON」是無效的。首先,所有報價必須用雙引號,而不是單引號。其次,這不是那麼「無效」,只是錯誤,「data_for_users_city」的價值應該不是這樣完全引用的 - 它違背了使用JSON作爲編碼的全部目的。 – Pointy 2011-04-19 12:19:46

回答

1

奇怪的是,它好像data_for_users_city不是數組而是一個字符串。我希望這不是錯字或複製/粘貼錯誤。

編輯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); 

EDIT 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); 
+0

和原因? – 2011-04-19 12:07:41

+0

@Salman A我沒有倒下,但我懷疑有人可能會對使用「eval()」的建議感到不滿。因爲你指出數據的嚴重問題,實際上,我提高了:-) – Pointy 2011-04-19 12:18:07

+0

是的。如果eval是(我)推薦使用jQuery.parseJSON()代替的問題。 – 2011-04-19 12:23:06

2

您似乎在使用jQuery。如果你想從JSON數據生成直接的HTML,一個簡單的解決方案是通過插件使用簡單的模板,如jQote2。它提供了一種簡單的語法,可以循環使用數據。使用JS模板還可以更輕鬆地維護HTML結構。

0

您是否考慮過使用JavaScript模板引擎將JSON轉換爲HTML?

我是pure.js的作者,這是很原始的,但有很多經典的雙括號引擎可用。

0

如果您使用的是jQuery,請考慮使用var json = $.parseJSON(data)。這會將您的JSON字符串轉換爲JSON對象。

試一試。它應該讓你的對象更容易。