如何使用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>