如何解析多维链接的国家/城市.Json到下拉列表很容易使用javascript或jquery


How to parse multidimensional chained CountriesToCities.json to dropdown list easily using javascript or jquery?

如何使用JavaScript或jQuery轻松解析这个多维链接乡村-城市JSON到下拉列表?

这里有一点

"North Korea":["Pyongyang",""],"Vatican City":[""],"Antarctica":["Antarctica"],"Bermuda":["Hamilton","Saint George","Somerset"],"Curaçao":["Willemstad","Vredeberg","Emmastad"],"Ecuador":["Quito","Pichincha","Guayas","Guayaquil","Ibarra","Riobamba","Ambato","Otavalo","Guamote","Libertad","Huaquillas","Olmedo","Durán","Florida","Machala","Loja","Manta","Nabon","Milagro","Tulcán","Atuntaqui","Daule","Pasaje","Playas","San Miguel","Puerto Francisco de Orellana","Loreto","Montecristi","Hacienda Santa Catalina","Zamora","Vinces","Quevedo","Hacienda Duran","Bahia de Caraquez","Salinas","Hacienda Ibarra","Hacienda Bolivia","El Naranjal","Banos"],"South Africa":["Johannesburg","Sandton", ... etc 
http://www.3dz.com/media/job/countriesToCities.json

我已经试过了

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
   if(xhr.readyState === 4) {
    var countriesToCities = JSON.parse(xhr.responseText) ;
   var statusHTML= '<select class ="bulleted">';
      for (var i = 0; i < countriesToCities.length - 1; i+=1) {
    {
        statusHTML +='<option>';
    statusHTML+= countriesToCities[i].name; 
    statusHTML+= '</option>';
}
statusHTML+='</select>';
document.getElementById('countriesToCitiesList').innerHTML = statusHTML;
}
};
xhr.open('GET', 'http://www.3dz.com/media/job/countriesToCities.json');
xhr.send();

输出应该像这样:

 <select>
   <option value="country1">country1</option>
   <option value="country2">country2</option>
   <option value="country n">country n</option>
 </select> 

国家1

 <select>
   <option value=" city 1">city 1</option>
   <option value="city 2">city 2</option>
   <option value="city n">city n</option>
 </select> 

请帮助。

您的代码有几个问题。下面的代码可以正常工作。你需要先遍历所有国家,然后是每个国家的首都

<<p> JS代码/strong>
var countriesToCities = JSON.parse(xhr.responseText) ;
for (var i in countriesToCities) {
    var statusHTML= '<select class ="bulleted">';
    for(var j in countriesToCities[i])
    {
        statusHTML +='<option>';
        statusHTML+= countriesToCities[i][j]; 
        statusHTML+= '</option>';
    }
    statusHTML+='</select>';
    var div = document.getElementById('countriesToCitiesList');
    div.innerHTML = div.innerHTML + statusHTML;
}

<div id="countriesToCitiesList"></div>