我正在從如下所示的 API 中檢索資料 -
"title": "Company Name",
"markets": "US, Asia",
"market_ids": "4, 5"
我需要將此資料添加到這樣的下拉選單中 -
<option value="4">US</option>
所以我需要洗掉逗號和任何重復項（同一個市場會有很多條目）
一開始我是這么想的——
$.ajax({
method: 'GET',
url: 'http://localhost:9001/api/directory',
}).done(function (data, status, xhr) {
let markets = [];
$.each(data, function (index, value) {
markets.push(value.markets);
})
markets = [...new Set(markets.toString().split(','))];
for (market of markets) {
$(".directory-input.market").append(
`<option value="" >${market}</option>`)
};
});
這可以用逗號分隔市場名稱并消除任何重復項，但問題是我無法將市場 ID 添加到值中。我還需要可以訪問市場 ID。
uj5u.com熱心網友回復：
如果您可以控制 API 設計，例如
{
title: 'Company Name',
markets: [
{ id: 4, name: 'Asia' },
{ id: 4, name: 'US' }
]
}將使使用更容易，更清晰。
給出這個例子，并做出幾個假設：
- 市場名稱是唯一的
- market_ids 的順序與市場相同，包括重復
這應該有效
$
.ajax({
method: 'GET',
url: 'http://localhost:9001/api/directory',
})
.done((data, status, xhr) => {
const marketSelect = $(".directory-input.market");
const labels = Array.from(new Set(data.markets.split(', ')));
const ids = Array.from(new Set(data.market_ids.split(', ')));
labels.forEach(
(label, idx) =>
marketSelect.append(`<option value="${ids[idx]}" >${label}</option>`)
);
});uj5u.com熱心網友回復：
假設將有相同數量的 id 和市場。請注意，如果您要添加很多選項，您可能希望使用選項作為 documentFragment 創建選擇本身以避免重繪。
const data = {
"title": "Company Name",
"markets": "US, Asia, Asia",
"market_ids": "4, 5, 5"
};
const marketSelectEl = document.getElementById('market-select');
const markets = Array.from(
new Set(data.markets.split(',').map(m => m.trim()))
);
const market_ids = Array.from(
new Set(data.markets.split(',').map(m => m.trim()))
);
const marketOptions = markets
.map((marketName, index) => {
const optionEl = document.createElement('option');
optionEl.value = market_ids[index];
optionEl.innerText = marketName;
return optionEl;
})
;
marketOptions.forEach(el => marketSelectEl.append(el));<select id="market-select" style="width: 200px;">
</select>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/338027.html
標籤：javascript 查询 阿贾克斯 休息