問題描述

現(xiàn)在正在搞兩個(gè)個(gè)下拉列表，用來(lái)選擇兩個(gè)地點(diǎn)，地點(diǎn)的名稱與坐標(biāo)都在json里面了，因?yàn)閿?shù)據(jù)多，不方便將一個(gè)個(gè)名稱放到HTML中，所以上網(wǎng)查了一下方法，但是依然沒有顯示，就想問問怎么才能提取json里面的名稱放到HTML的下拉列表中呢？謝謝了。

{ '北京首都國(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 }}

問題解答

如果你想將數(shù)據(jù)渲染到Html里面的話，首先得把你的數(shù)據(jù)結(jié)構(gòu)變一下，你貼出來(lái)的數(shù)據(jù)結(jié)構(gòu)不規(guī)范///////////////////////////////////////////你這樣修改的數(shù)據(jù)結(jié)構(gòu)仍然取不出來(lái)哦，應(yīng)該像下面的結(jié)構(gòu)：

{ 'address':[{ 'name':'北京首都國(guó)際機(jī)場(chǎng)', 'latitude':40.08010101, 'longitude':116.5849991},{ 'name':'北京西郊機(jī)場(chǎng)', 'latitude':39.96080017, 'longitude':116.2570038}....... ]}

循環(huán)address,這樣你才能取到值

你可以循環(huán)遍歷這個(gè)json對(duì)象, for(var key in json){//每一個(gè)key值就是機(jī)場(chǎng)名}

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è)意思么。

可以用select2插件，可以ajax模糊匹配，很好用

把經(jīng)緯度用屬性保存起來(lái)，提交的時(shí)候取出來(lái)，或者用FormData對(duì)象提交表單

也可以做一個(gè)隱藏表單，選擇的時(shí)候就把經(jīng)緯度充填到隱藏表單，提交

當(dāng)然，說(shuō)起來(lái)容易，做起來(lái)還是要花點(diǎn)時(shí)間，樓主加油

es6的話很簡(jiǎn)單：

let keys = Object.keys(obj); //就可以獲取一個(gè)數(shù)組，判斷輸入的值是否在這個(gè)數(shù)組中可以：keys.find(fn); //來(lái)獲取相應(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í)，通過獲取輸入值來(lái)進(jìn)行匹配的話是最好的

這數(shù)據(jù)結(jié)構(gòu) 咋感覺那么怪呢