javascript - 如何將json的name放到下拉列表中呢?
問題描述
現(xiàn)在正在搞兩個(gè)個(gè)下拉列表,用來選擇兩個(gè)地點(diǎn),地點(diǎn)的名稱與坐標(biāo)都在json里面了,因?yàn)閿?shù)據(jù)多,不方便將一個(gè)個(gè)名稱放到HTML中,所以上網(wǎng)查了一下方法,但是依然沒有顯示,就想問問怎么才能提取json里面的名稱放到HTML的下拉列表中呢?謝謝了。
{ '北京首都國際機(jī)場':{ 'latitude':40.08010101, 'longitude':116.5849991 }, '北京西郊機(jī)場':{ 'latitude':39.96080017, 'longitude':116.2570038 }, '內(nèi)蒙古赤峰機(jī)場':{ 'latitude':42.23500061, 'longitude':118.9079971 }, '長治王村機(jī)場':{ 'latitude':36.24750137, 'longitude':113.1259995 }, '鄂爾多斯伊金霍洛機(jī)場':{ 'latitude':39.49, 'longitude':109.8613889 }, '大同機(jī)場':{ 'latitude':40.06029892, 'longitude':113.4820023 }, '二連浩特賽烏蘇國際機(jī)場':{ 'latitude':43.4225, 'longitude':112.0966667 }, '邯鄲機(jī)場':{ 'latitude':36.52583333, 'longitude':114.4255556 }, '白塔國際機(jī)場':{ 'latitude':40.85139847, 'longitude':111.8239975 }, '東山機(jī)場':{ 'latitude':49.20500183, 'longitude':119.8249969 }, '北京南苑機(jī)場':{ 'latitude':39.78279877, 'longitude':116.3880005 }, '包頭二里半機(jī)場':{ 'latitude':40.56000137, 'longitude':109.9970016 }, '山海關(guān)機(jī)場':{ 'latitude':39.9681015, 'longitude':119.7310028 }, '石家莊正定國際機(jī)場':{ 'latitude':38.28070068, 'longitude':114.6969986 }, '天津?yàn)I海國際機(jī)場':{ 'latitude':39.12440109, 'longitude':117.3460007 }, '通遼機(jī)場':{ 'latitude':43.55670166, 'longitude':122.1999969 }, '烏海機(jī)場':{ 'latitude':39.7934, 'longitude':106.7993 }, '烏蘭浩特機(jī)場':{ 'latitude':46.195333, 'longitude':122.008333 }, '錫林浩特機(jī)場':{ 'latitude':43.91559982, 'longitude':115.9639969 }, '大連邢臺機(jī)場':{ 'latitude':36.8831, 'longitude':114.4293 }, '運(yùn)城關(guān)公機(jī)場':{ 'latitude':35.116391, 'longitude':111.0313889 }, '太原武宿機(jī)場':{ 'latitude':37.74689865, 'longitude':112.6279984 }, '北海機(jī)場':{ 'latitude':21.5394001, 'longitude':109.2939987 }, '常德桃花源機(jī)場':{ 'latitude':28.91889954, 'longitude':111.6399994 }, '懷化芷江機(jī)場':{ 'latitude':27.44111111, 'longitude':109.7 }, '大庸機(jī)場':{ 'latitude':29.10280037, 'longitude':110.4430008 }, '廣州白云國際機(jī)場':{ 'latitude':23.39240074, 'longitude':113.2990036 }, '長沙黃花國際機(jī)場':{ 'latitude':28.18919945, 'longitude':113.2200012 }, '衡陽東江機(jī)場':{ 'latitude':26.90530014, 'longitude':112.6279984 }, '桂林兩江國際機(jī)場':{ 'latitude':25.21809959, 'longitude':110.0390015 }, '羅定素龍機(jī)場':{ 'latitude':22.711169, 'longitude':111.60134 }, '零陵機(jī)場':{ 'latitude':26.338661, 'longitude':111.610043 }, '梅縣機(jī)場':{ 'latitude':24.35000038, 'longitude':116.1330032 }, '南寧吳圩機(jī)場':{ 'latitude':22.60829926, 'longitude':108.1719971 }, '汕頭外砂機(jī)場':{ 'latitude':23.42690086, 'longitude':116.762001 }, '珠海機(jī)場':{ 'latitude':22.00639915, 'longitude':113.3759995 }}
問題解答
回答1:如果你想將數(shù)據(jù)渲染到Html里面的話,首先得把你的數(shù)據(jù)結(jié)構(gòu)變一下,你貼出來的數(shù)據(jù)結(jié)構(gòu)不規(guī)范///////////////////////////////////////////你這樣修改的數(shù)據(jù)結(jié)構(gòu)仍然取不出來哦,應(yīng)該像下面的結(jié)構(gòu):
{ 'address':[{ 'name':'北京首都國際機(jī)場', 'latitude':40.08010101, 'longitude':116.5849991},{ 'name':'北京西郊機(jī)場', 'latitude':39.96080017, 'longitude':116.2570038}....... ]}
循環(huán)address,這樣你才能取到值
回答2:你可以循環(huán)遍歷這個(gè)json對象, for(var key in json){//每一個(gè)key值就是機(jī)場名}
回答3: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); })}
是這個(gè)意思么。
回答4:可以用select2插件,可以ajax模糊匹配,很好用
把經(jīng)緯度用屬性保存起來,提交的時(shí)候取出來,或者用FormData對象提交表單
也可以做一個(gè)隱藏表單,選擇的時(shí)候就把經(jīng)緯度充填到隱藏表單,提交
當(dāng)然,說起來容易,做起來還是要花點(diǎn)時(shí)間,樓主加油
回答5:es6的話很簡單:
let keys = Object.keys(obj); //就可以獲取一個(gè)數(shù)組,判斷輸入的值是否在這個(gè)數(shù)組中可以:keys.find(fn); //來獲取相應(yīng)的值,fn里面可以進(jìn)行模糊匹配
es5的話麻煩點(diǎn):
var arr = [];for( var key in obj ){ arr.push(key);}arr.each(fn) //fn里面可以進(jìn)行模糊匹配
你如果要弄個(gè)下拉表,特別是數(shù)據(jù)量龐大的話有點(diǎn)不現(xiàn)實(shí),通過獲取輸入值來進(jìn)行匹配的話是最好的
回答6:這數(shù)據(jù)結(jié)構(gòu) 咋感覺那么怪呢
相關(guān)文章:
1. 如何修改phpstudy的phpmyadmin放到其他地方2. java 排序的問題3. 我的html頁面一提交,網(wǎng)頁便顯示出了我的php代碼,求問是什么原因?4. 網(wǎng)絡(luò)傳輸協(xié)議 - 以下三種下載方式有什么不同?如何用python模擬下載器下載?5. angular.js - Angular路由和express路由的組合使用問題6. 我在centos容器里安裝docker,也就是在容器里安裝容器,報(bào)錯(cuò)了?7. tp6表單令牌8. 老哥們求助啊9. php - mysql中,作為主鍵的字段,用int類型,是不是比用char類型的效率更高?10. django - 后臺返回的json數(shù)據(jù)經(jīng)過Base64加密,獲取時(shí)用python如何解密~!
