黑毛到白毛的攻城獅之路: jQuery 讀取 JSONArray 的方法

2011年11月4日星期五

jQuery 讀取 JSONArray 的方法

一般透過 $.ajax 送 JSON 格式的資料給後端處理
後端回應一個 JSON 回來，都可以直接用 .xxx 來存取回應的 JSON
例如回應的 JSON 是 {"statuscode", 200}
可以直接用：

        
              $.ajax({
　　type: "GET",
　　url: endpoint,
　　contentType: "application/json",
　　dataType: "json",
　　success: function(data){
　　　　consile.log("statuscode: " + data.statuscode);
　　},
　　error: function(){
　　　　unblock(); // TODO
　　}
});

這樣在 FireFox 的 FireBug 中就會跑出：「statuscode: 200」的記錄。

當回應的 JSON 是個巢狀的 JSON array 時，則處理方式稍微複雜一點點

舉例來說，回應的資料格式為：

        
          
          
              
              {
　　"statuscode": 200,
　　"time": 
　　[
　　　　{
　　　　　　"week":1, 
　　　　　　"start":"03:00", 
　　　　　　"end":"03:10"
　　　　}, 
　　　　{
　　　　　　"week": 2, 
　　　　　　"start":"03:00", 
　　　　　　"end":"03:10"
　　　　}
　　]
}

            

        
      

也就是一個 JSON 格式的資料，statuscode 欄位記錄狀態
time 欄位記錄了一個 JSON array 表示一週內的某些時間
以上面的例子是表示星期一 3:00~3:10、星期二 3:00~3:10。
如果用最開頭的例子的取法，data.statuscode 可以順利取到狀態的值
data.time 會有兩種可能：
1. data.time 是 JSON object 時，data.time 會得到 [object Object],[object Object] 的結果
2. data.time 是字串，則只會取得 [ ...... ] 這段範圍的字串值。
以下就依照兩種狀況處理。

1. data.time 是 JSON object
取出的 data.time 已經是 JSON 的物件了，因此可以直接用迴圈讀取內容。
以下是範例程式碼：

        
          
          
              
              $.ajax({
　　type: "GET",
　　url: endpoint,
　　contentType: "application/json",
　　dataType: "json",
　　success: function(data){
　　　　consile.log("statuscode: " + data.statuscode);
　　　　if(data.statuscode == 200) {
　　　　　　// 顯示 time_array 當中每一個陣列的內容
　　　　　　$.each(data.time, function(index, json) {
　　　　　　　　console.log("#" + json.week + ", period: " + json.start + " to " + json.end);
　　　　　　});
　　　　}     
　　}
});

            

        
      

2. data.time 是字串
要先轉換成 JSON 的格式，然後再用迴圈讀取
這裡迴圈是用 jQuery 的 $.each 來實行。
以下是範例程式碼：

        
          
          
              
              $.ajax({
　　type: "GET",
　　url: endpoint,
　　contentType: "application/json",
　　dataType: "json",
　　success: function(data){
　　　　consile.log("statuscode: " + data.statuscode);
　　　　if(data.statuscode == 200) {
　　　　　　var time = data.time;
　　　　　　var time_array = $.parseJSON(time);  // 把字串轉換成 JSON array
 
　　　　　　// 顯示 time_array 當中每一個陣列的內容
　　　　　　$.each(time_array, function(index, json) {
　　　　　　　　console.log("#" + json.week + ", period: " + json.start + " to " + json.end);
　　　　　　});
　　　　}     
　　}
});

            

        
      