提交時，JSON數據返回：「無法讀取未定義的屬性值」

Question

我正在拉取JSON數據以填充兩個單獨的選擇字段（國家和城市）。

當提交表單我得到的：

Cannot read property 'value' of undefined

我曾嘗試使用重置數據：

data.countries = data[0]; 
data = data[0]; 

/前後的返回：

Uncaught TypeError: Cannot read property 'length' of undefined 

這裏是我用來檢索數據的代碼片段

$.ajax({ 
    url: myAPI, 
    type: 'POST', 
    success: function (data) { 

    $.each(data.countries, function (index, value) { 
     country.append('<option value="' + value.name + '">' + value.name +'</option>'); 
    }); 

    country.on('change', function() { 
     var self = $(this).val(); 

     city.find('option').remove(); 
     for(var i = 0; i < data.countries.length; i++) { 
      if(data.countries[i].name == self) { 
       $.each(data.countries[i].metroAreas, function (index, value) { 
        city.append('<option value="' + value.name+'">' + value.name +'</option>'); 
       }); 
      } 
     } 
    }); 
    } 

}); 

Answer 1

你應該告訴jQuery使用dataType option解析JSON結果爲JSON。

當省略時，jQuery將基於Content-Type響應頭來猜測數據類型。這是一個常見的問題，服務器不設置此標題或設置不正確（例如到text/html）。

$.ajax({ 
    url: myAPI, 
    type: 'POST', 
    dataType: 'json', 
    success: function (data) { 

    $.each(data.countries, function (index, value) { 
     country.append('<option value="' + value.name + '">' + value.name +'</option>'); 
    }); 

    country.on('change', function() { 
     var self = $(this).val(); 

     city.find('option').remove(); 
     for(var i = 0; i < data.countries.length; i++) { 
      if(data.countries[i].name == self) { 
       $.each(data.countries[i].metroAreas, function (index, value) { 
        city.append('<option value="' + value.name+'">' + value.name +'</option>'); 
       }); 
      } 
     } 
    }); } 

});