使用json填充選擇下拉列表

Question

使用jQuery，我試圖用json填充選擇下拉列表。我想顯示從下面的JSON國家名單...

{ 
"country":[ 
    { 
    "China":[ 
     { 
      "tarrifType":"Pay as you go" 
     }, 
     { 
      "fixLine":"23p" 
     } 
    ], 
    "India":[ 
     { 
      "sms":"39p" 
     }, 
     { 
      "fixLine":"3p", 
      "sms":"59p" 
     } 
    ], 
    "Poland":[ 
     { 
      "mobile":"29p", 
      "sms":"19p" 
     }, 
     { 
      "tarrifType":"China Pass", 
      "fixLine":"23p" 
     } 
    ] 
    } 
] 
} 

到目前爲止，我已經嘗試與被下面做這個jQuery的...

$.getJSON("js/widgets/country-picker.json", function(result){ 
    $.each(result, function(i, field) { 
    $('#js-rate-select').append($('<option>').text(field[1]).attr('value', field[1])); 
    }); 
}); 

但它確實不填充選擇下拉列表或提供任何DOM錯誤。任何建議如何我可以解決這個問題？我認爲這個問題是由於json格式 - 我可以改變謝謝

Answer 1

你的json提要返回一個只包含一個索引的數組，這個索引是不同國家的一個對象。爲此，你應該說

result.country[0].China.tarrifType. 

而且，你將能夠重複的國家是這樣的：

$.each(result.country[0], function(country,data) { console.log(country); } 

雖然，我會建議重做你JSON。你可以這樣做：

var result = { 
    "country": { 
     "China": { 
      "tarrifType": "Pay as you go", 
      "fixLine": "23p" 
     }, 
     "India": { 
      "sms": "39p", 
      "fixLine": "3p", 
      "sms": "59p" 
     }, 
     "Poland": { 
      "mobile": "29p", 
      "sms": "19p", 
      "tarrifType": "China Pass", 
      "fixLine": "23p" 
     } 
    } 
}; 


$(function() { 
    $.each(result.country, function (country, data) { 
     console.log("Country : " + country); 
     console.log(data); // data.fixLine, data.tarrifType, data.sms 

     $('#selectbox').append('<option value="' + country + '">' + country + '</option>'); 

    }); 
}); 

的jsfiddle這裏： Link to JSfiddle