从表格json数据中填充select元素的干净方法

Question

我在一个对象数组中有一些数据，并且希望为每个字段填充一个select元素，其中包含该字段的所有可能键。有一把独一无二的钥匙。我能实现的最好方法是在数组上循环，并将每个值附加到它的一个Set中，然后在每个Set上循环以创建一个新的选项元素。这导致了大量的重复代码，无法简单地添加更多字段。有什么更好的解决方案的建议吗？如果香草中没有替代方案，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);
});

Answer 1

我会采用更实用的方法，使用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>

Answer 2

这是一个有趣的问题，因此我制定了一个更干净的解决方案。我使用了过滤和映射功能。最好使用与命名数据相同的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>