操作JSON：從基本的JSON到更復雜的JSON與數組？

Question

我想使用AJAX從我的數據庫中獲取樣式列表。樣式具有我想用來將樣式排序爲JSON對象的類別FK，然後使用該JavaScript與JSON來根據用戶選擇的類別填充選擇列表。

這裏是我的代碼：

$(document).ready(function() { 

    var styles = { 
     "cat1": [], 
     "cat2": [], 
     "cat3": [], 
     "cat4": [] 
    } 

    $.getJSON("/Inventory/GetStyles", function (data) { 
     $(data).each(function (i, d) { 
      var n = { 
       "StyleID": d.StyleID, 
       "Name": d.Name, 
       "CategoryID": d.CategoryID 
      }; 

      switch (d.CategoryID) { 
       case 1: 
        styles.cat1.push(n); 
        break; 
       case 2: 
        styles.cat2.push(n); 
        break; 
       case 3: 
        styles.cat3.push(n); 
        break; 
       case 4: 
        styles.cat4.push(n); 
        break; 
      }; 
     }); 
    }); 

    alert(styles.cat1[0].Name); 
}); 

當我使用debugger;和步，我發現一切似乎運作得很好。如預期的那樣充滿了數據，但警報永不停止。相反，我得到一個錯誤：

類型錯誤：styles.cat1 [0]未定義

這是令人困惑，因爲，在調試時，我可以通過鼠標，當看到styles.cat1[0].Name具有價值應該。如果我移動debugger;聲明AJAX調用外

，該styles.cat1[0].Name變化不確定的，如：奇怪的是，然而，這只是當我把debugger;聲明我的AJAX調用內部的工作，如在這裏看到在這裏看到：

我在一個不知如何得到這個直。任何幫助是極大的讚賞。

Answer 1

您正試圖在ajax調用完成之前訪問styles.cat1 [0]。移動警報排隊進回調函數

$.getJSON("/Inventory/GetStyles", function (data) { 
     $(data).each(function (i, d) { 
      var n = { 
       "StyleID": d.StyleID, 
       "Name": d.Name, 
       "CategoryID": d.CategoryID 
      }; 

      switch (d.CategoryID) { 
       case 1: 
        styles.cat1.push(n); 
        break; 
       case 2: 
        styles.cat2.push(n); 
        break; 
       case 3: 
        styles.cat3.push(n); 
        break; 
       case 4: 
        styles.cat4.push(n); 
        break; 
      }; 
     }); 
     alert(styles.cat1[0].Name); 
    }); 

Answer 2

正如其他人所指出的那樣，你alert() Ajax請求，甚至返回之前發生。

這意味着alert()必須是success回調函數的一部分。爲了使這更容易，你真的應該使用jQuery的推遲回調範例。

這比將所有東西塞滿到單個回調函數中要簡單得多。比較：

$(function() { 
    $.getJSON("/Inventory/GetStyles") 
    .then(function (data) { 
     var styles = {}; 
     $.each(data, function (i, d) { 
      var catN = "cat" + d.CategoryID; 

      if (!(catN in styles)) { 
       styles[catN] = []; 
      } 

      styles[catN].push({ 
       StyleID: d.StyleID, 
       Name: d.Name, 
       CategoryID: d.CategoryID 
      }); 
     }); 
     return styles; 
    }) 
    .done(function (styles) { 
     alert(styles.cat1[0].Name); 
    }); 
}); 

推薦閱讀http://api.jquery.com/category/deferred-object/