我在一組物件中有一些資料，并希望為每個包含該欄位所有可能鍵的欄位填充一個選擇元素。有一個唯一的密鑰。我可以實作的最好方法是回圈遍歷陣列并將每個值附加到它的集合中，然后遍歷每個集合以創建一個新的選項元素。這導致了很多重復的代碼，沒有簡單的方法來添加更多的欄位。對更好的解決方案有什么建議嗎？如果香草中沒有替代品，jQuery 也會這樣做。
https://codepen.io/nokeldin/pen/oNpzxmL
var nameSet = new Set();
var eyeSet = new Set();
var stateSet = new Set();
var fruitSet = new Set();
data.forEach(function (e, i, arr) {
nameSet.add(e.name);
eyeSet.add(e.eyeColor);
stateSet.add(e.state);
fruitSet.add(e.fruit);
});
nameSet.forEach(function (e) {
var nameEntry = document.createElement("option");
nameEntry.text = e;
document.getElementById('names').add(nameEntry);
});
stateSet.forEach(function (e) {
var stateEntry = document.createElement("option");
stateEntry.text = e;
document.getElementById('state-select').add(stateEntry);
});
fruitSet.forEach(function (e) {
var fruitEntry = document.createElement("option");
fruitEntry.text = e;
document.getElementById('fruit-select').add(fruitEntry);
});
eyeSet.forEach(function (e) {
var eyeEntry = document.createElement("option");
eyeEntry.text = e;
document.getElementById('eye-select').add(eyeEntry);
});
uj5u.com熱心網友回復：
我會選擇一種更實用的方法，使用reduce和map方法。唯一需要注意的是在命名 HTML 的 id 時。它們必須與 JavaScript 中的欄位匹配。
首先，它根據您的資料創建了一個鍵陣列。然后，該陣列被簡化為構造一個由 Set 組成的物件，而在每個 Set 中，資料被映射為僅由特定鍵組成的陣列。最后，它會抓取該預制物件的每個條目（Set）并將其每個值添加到相應的select.
const data = [{eyeColor:"brown",name:"Cindy",state:"texas",fruit:"banana"},{eyeColor:"brown",name:"Carmen",state:"nebraska",fruit:"mango"},{eyeColor:"green",name:"Belinda",state:"alaska",fruit:"banana"},{eyeColor:"brown",name:"Lacy",state:"alaska",fruit:"mango"},{eyeColor:"blue",name:"Mcfarland",state:"nebraska",fruit:"banana"},{eyeColor:"blue",name:"Baird",state:"texas",fruit:"apple"},{eyeColor:"green",name:"Kara",state:"nebraska",fruit:"banana"},{eyeColor:"blue",name:"Hebert",state:"nebraska",fruit:"apple"},{eyeColor:"brown",name:"Opal",state:"nebraska",fruit:"banana"},{eyeColor:"green",name:"Gayle",state:"texas",fruit:"mango"},{eyeColor:"green",name:"Bernadine",state:"nebraska",fruit:"mango"},{eyeColor:"green",name:"Payne",state:"alaska",fruit:"banana"}];
const keys = ["eyeColor", "name", "state", "fruit"];
const obj = keys.reduce((acc, key) => {
acc[key] = new Set(data.map(info => info[key]));
return acc;
}, {})
Object.entries(obj).forEach(([key,set]) => {
set.forEach(value => {
const option = document.createElement("option");
option.text = value;
document.getElementById(`${key}-select`).add(option);
})
})<select id="state-select" class="selection-cat">Cat1</select>
<select id="eyeColor-select" class="selection-cat">Cat2</select>
<select id="fruit-select" class="selection-cat">Cat3</select>
<select id="name-select" size=5></select>uj5u.com熱心網友回復：
這是一個有趣的問題，因此我提出了一個更清潔的解決方案。我使用了過濾器和地圖功能。最好使用與命名資料中相同的 HTML 選擇 ID，因此應將字典放在一邊。
const data = [{ eyeColor: "blue", name: "Katrina", state: "nebraska", fruit: "mango" },{ eyeColor: "green", name: "Meyer", state: "nebraska", fruit: "mango" }, { eyeColor: "brown", name: "Roman", state: "nebraska", fruit: "apple" }, { eyeColor: "green", name: "Forbes", state: "nebraska", fruit: "banana" }, { eyeColor: "green", name: "Melinda", state: "alaska", fruit: "banana" }, { eyeColor: "green", name: "Lucille", state: "alaska", fruit: "mango" }, { eyeColor: "brown", name: "Leanne", state: "nebraska", fruit: "apple" }, { eyeColor: "green", name: "Annabelle", state: "nebraska", fruit: "banana" }, { eyeColor: "blue", name: "Cote", state: "alaska", fruit: "banana" }, { eyeColor: "brown", name: "Boyd", state: "alaska", fruit: "mango" }, { eyeColor: "brown", name: "Witt", state: "texas", fruit: "apple" }, { eyeColor: "green", name: "Salinas", state: "texas", fruit: "mango" }, { eyeColor: "green", name: "Traci", state: "alaska", fruit: "apple" }, { eyeColor: "green", name: "Brandie", state: "alaska", fruit: "mango" }, { eyeColor: "blue", name: "Della", state: "alaska", fruit: "apple" }, { eyeColor: "green", name: "Conrad", state: "texas", fruit: "apple" }, { eyeColor: "blue", name: "Norris", state: "nebraska", fruit: "banana" }, { eyeColor: "green", name: "Reynolds", state: "nebraska", fruit: "mango" }, { eyeColor: "green", name: "Jackie", state: "texas", fruit: "mango" }, { eyeColor: "brown", name: "Adele", state: "texas", fruit: "apple" }, { eyeColor: "blue", name: "Flowers", state: "nebraska", fruit: "mango" }, { eyeColor: "brown", name: "Stanley", state: "nebraska", fruit: "apple" }, { eyeColor: "green", name: "Mccarty", state: "texas", fruit: "apple" }, { eyeColor: "blue", name: "Lopez", state: "nebraska", fruit: "banana" }, { eyeColor: "brown", name: "Pierce", state: "texas", fruit: "apple" }, { eyeColor: "green", name: "Roy", state: "texas", fruit: "banana" }, { eyeColor: "green", name: "Francis", state: "alaska", fruit: "banana" }, { eyeColor: "brown", name: "Buck", state: "alaska", fruit: "banana" }, { eyeColor: "green", name: "Dale", state: "alaska", fruit: "apple" }, { eyeColor: "brown", name: "Keith", state: "nebraska", fruit: "mango" }, { eyeColor: "green", name: "Gwen", state: "texas", fruit: "mango" }, { eyeColor: "blue", name: "Lisa", state: "nebraska", fruit: "mango" }, { eyeColor: "brown", name: "Burt", state: "alaska", fruit: "banana" }, { eyeColor: "brown", name: "Taylor", state: "texas", fruit: "apple" }, { eyeColor: "green", name: "Juliet", state: "nebraska", fruit: "mango" }, { eyeColor: "brown", name: "Trudy", state: "alaska", fruit: "apple" }, { eyeColor: "green", name: "Carney", state: "alaska", fruit: "banana" }, { eyeColor: "brown", name: "Lillie", state: "alaska", fruit: "apple" }, { eyeColor: "brown", name: "Herring", state: "texas", fruit: "banana" }, { eyeColor: "brown", name: "Ginger", state: "alaska", fruit: "mango" }, { eyeColor: "brown", name: "Mcdonald", state: "nebraska", fruit: "mango" }, { eyeColor: "blue", name: "Evangelina", state: "texas", fruit: "apple" }, { eyeColor: "green", name: "Willis", state: "alaska", fruit: "mango" }, { eyeColor: "brown", name: "Tammy", state: "alaska", fruit: "banana" }, { eyeColor: "brown", name: "Cindy", state: "texas", fruit: "banana" }, { eyeColor: "brown", name: "Carmen", state: "nebraska", fruit: "mango" }, { eyeColor: "green", name: "Belinda", state: "alaska", fruit: "banana" }, { eyeColor: "brown", name: "Lacy", state: "alaska", fruit: "mango" }, { eyeColor: "blue", name: "Mcfarland", state: "nebraska", fruit: "banana" }, { eyeColor: "blue", name: "Baird", state: "texas", fruit: "apple" }, { eyeColor: "green", name: "Kara", state: "nebraska", fruit: "banana" }, { eyeColor: "blue", name: "Hebert", state: "nebraska", fruit: "apple" }, { eyeColor: "brown", name: "Opal", state: "nebraska", fruit: "banana" }, { eyeColor: "green", name: "Gayle", state: "texas", fruit: "mango" }, { eyeColor: "green", name: "Bernadine", state: "nebraska", fruit: "mango" }, { eyeColor: "green", name: "Payne", state: "alaska", fruit: "banana" },];
const selects = [
{ dataName: "eyeColor", id: "eye-select" },
{ dataName: "state", id: "state-select" },
{ dataName: "fruit", id: "fruit-select" },
{ dataName: "name", id: "names" },
];
function init() {
selects.forEach((select) => {
select["element"] = document.getElementById(select.id);
select["options"] = new Set(data.map((record) => record[select.dataName]));
});
console.table(selects);
selects
.filter((select) => select.id === "names")[0]
.element.addEventListener("change", (event) => {
const selectedData = data.filter((d) => d.name === event.target.value)[0];
console.table(selectedData);
for (let d in selectedData) {
selects.filter((s) => s.dataName === d)[0].element.value =
selectedData[d];
}
});
}
function render() {
selects.forEach((select) => {
select.options.forEach((option) => {
const optionElement = document.createElement("option");
optionElement.value = option;
optionElement.innerText = option;
select.element.appendChild(optionElement);
});
});
}
function clearOptions() {
selects.forEach((select) => {
Array.from(select.element.children).forEach((child) => child.remove());
});
}
init();
render();<select id="state-select" class="selection-cat">Cat1</select>
<select id="eye-select" class="selection-cat">Cat2</select>
<select id="fruit-select" class="selection-cat">Cat3</select>
<select id="names" size=5></select>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446483.html
標籤：javascript html jQuery
上一篇：如何用jquery比較兩個類？