We are currently working on two drop-down lists to select two locations. The names and coordinates of the locations are all in json. Because there is a lot of data, it is inconvenient to put each name into HTML, so I checked online. method, but it is still not displayed, I would like to ask how to extract the names in json and put them into the drop-down list of HTML? Thank you.
{
"北京首都國(guó)際機(jī)場(chǎng)":{
"latitude":40.08010101,
"longitude":116.5849991
},
"北京西郊機(jī)場(chǎng)":{
"latitude":39.96080017,
"longitude":116.2570038
},
"內(nèi)蒙古赤峰機(jī)場(chǎng)":{
"latitude":42.23500061,
"longitude":118.9079971
},
"長(zhǎng)治王村機(jī)場(chǎng)":{
"latitude":36.24750137,
"longitude":113.1259995
},
"鄂爾多斯伊金霍洛機(jī)場(chǎng)":{
"latitude":39.49,
"longitude":109.8613889
},
"大同機(jī)場(chǎng)":{
"latitude":40.06029892,
"longitude":113.4820023
},
"二連浩特賽烏蘇國(guó)際機(jī)場(chǎng)":{
"latitude":43.4225,
"longitude":112.0966667
},
"邯鄲機(jī)場(chǎng)":{
"latitude":36.52583333,
"longitude":114.4255556
},
"白塔國(guó)際機(jī)場(chǎng)":{
"latitude":40.85139847,
"longitude":111.8239975
},
"東山機(jī)場(chǎng)":{
"latitude":49.20500183,
"longitude":119.8249969
},
"北京南苑機(jī)場(chǎng)":{
"latitude":39.78279877,
"longitude":116.3880005
},
"包頭二里半機(jī)場(chǎng)":{
"latitude":40.56000137,
"longitude":109.9970016
},
"山海關(guān)機(jī)場(chǎng)":{
"latitude":39.9681015,
"longitude":119.7310028
},
"石家莊正定國(guó)際機(jī)場(chǎng)":{
"latitude":38.28070068,
"longitude":114.6969986
},
"天津?yàn)I海國(guó)際機(jī)場(chǎng)":{
"latitude":39.12440109,
"longitude":117.3460007
},
"通遼機(jī)場(chǎng)":{
"latitude":43.55670166,
"longitude":122.1999969
},
"烏海機(jī)場(chǎng)":{
"latitude":39.7934,
"longitude":106.7993
},
"烏蘭浩特機(jī)場(chǎng)":{
"latitude":46.195333,
"longitude":122.008333
},
"錫林浩特機(jī)場(chǎng)":{
"latitude":43.91559982,
"longitude":115.9639969
},
"大連邢臺(tái)機(jī)場(chǎng)":{
"latitude":36.8831,
"longitude":114.4293
},
"運(yùn)城關(guān)公機(jī)場(chǎng)":{
"latitude":35.116391,
"longitude":111.0313889
},
"太原武宿機(jī)場(chǎng)":{
"latitude":37.74689865,
"longitude":112.6279984
},
"北海機(jī)場(chǎng)":{
"latitude":21.5394001,
"longitude":109.2939987
},
"常德桃花源機(jī)場(chǎng)":{
"latitude":28.91889954,
"longitude":111.6399994
},
"懷化芷江機(jī)場(chǎng)":{
"latitude":27.44111111,
"longitude":109.7
},
"大庸機(jī)場(chǎng)":{
"latitude":29.10280037,
"longitude":110.4430008
},
"廣州白云國(guó)際機(jī)場(chǎng)":{
"latitude":23.39240074,
"longitude":113.2990036
},
"長(zhǎng)沙黃花國(guó)際機(jī)場(chǎng)":{
"latitude":28.18919945,
"longitude":113.2200012
},
"衡陽(yáng)東江機(jī)場(chǎng)":{
"latitude":26.90530014,
"longitude":112.6279984
},
"桂林兩江國(guó)際機(jī)場(chǎng)":{
"latitude":25.21809959,
"longitude":110.0390015
},
"羅定素龍機(jī)場(chǎng)":{
"latitude":22.711169,
"longitude":111.60134
},
"零陵機(jī)場(chǎng)":{
"latitude":26.338661,
"longitude":111.610043
},
"梅縣機(jī)場(chǎng)":{
"latitude":24.35000038,
"longitude":116.1330032
},
"南寧吳圩機(jī)場(chǎng)":{
"latitude":22.60829926,
"longitude":108.1719971
},
"汕頭外砂機(jī)場(chǎng)":{
"latitude":23.42690086,
"longitude":116.762001
},
"珠海機(jī)場(chǎng)":{
"latitude":22.00639915,
"longitude":113.3759995
}
}
If you want to render data into Html, you must first change your data structure. The data structure you posted is not standardized
//////////////////// //////////////////////////
The data structure you modified like this still cannot be retrieved. It should look like the following structure:
{
"address":[
{
"name":"北京首都國(guó)際機(jī)場(chǎng)",
"latitude":40.08010101,
"longitude":116.5849991
},{
"name":"北京西郊機(jī)場(chǎng)",
"latitude":39.96080017,
"longitude":116.2570038
}
.......
]
}
Loop address so you can get the value
You can loop through this json object, for(var key in json){//Each key value is the airport name}
function render() {
$.ajax({
url: '/api/getJSON',
dataType: 'json'
})
.done(function (res) {
var html = '';
for (var location in res) {
html += '<option>' + location + '</option>';
}
console.log(html);
})
}
Is this what it means?
You can use the select2 plug-in and ajax fuzzy matching, which is very easy to use
Save the latitude and longitude as attributes and take them out when submitting, or use the FormData object to submit the form
You can also make a hidden form. When selecting, fill in the longitude and latitude into the hidden form and submit
Of course, it’s easier said than done, but it still takes time to do. Come on, sir
es6’s words are very simple:
let keys = Object.keys(obj); //就可以獲取一個(gè)數(shù)組,判斷輸入的值是否在這個(gè)數(shù)組中可以:
keys.find(fn); //來(lái)獲取相應(yīng)的值,fn里面可以進(jìn)行模糊匹配
If you are using es5, please trouble:
var arr = [];
for( var key in obj ){
arr.push(key);
}
arr.each(fn) //fn里面可以進(jìn)行模糊匹配
If you want to make a drop-down table, especially if the amount of data is huge, it is a bit unrealistic. It is best to match by getting the input value