如何在javascript中遍历JSON数组？并使用它来填充<option>元素

Question

我有这个JSON数组，我想循环它们并使用它来填充我的option元素。

样本数组:

var myOptionData = [
{fooValue:"1", fooText:"option A"},
{fooValue:"2", fooText:"option B"},
{fooValue:"3", fooText:"option C"}
] 

我确实使用了这个方法:

var fields="";
fields += "</select >";
fields += "<option  value='0'></option>";
$.each(myOptionData , function (key, value) {
fields += "<option value=" + value.fooValue + ">" + value.fooText + "</option>";
});
fields += "</select >";

//但是我想让它更灵活，这样我就可以重用它从另一个JSON数组的另一个<option>，像这样的场景:

var myNewOptionData = [
{myValue:"5", myText:"option E"},
{myValue:"6", myText:"option F"},
{myValue:"7", myText:"option G"},
{myValue:"8", myText:"option H"}
] 

//现在我不能使用上面的方法

Answer 1

把整个操作变成一个函数:

function mkSelect(data){
return "<select><option  value='0'></option>"
+ data.map(o=>{
let [val,txt]=Object.values(o);
return "<option value=" + val + ">" + txt + "</option>"}).join("") 
+ "</select >";
}
const myOptionData = [
{fooValue:"1", fooText:"option A"},
{fooValue:"2", fooText:"option B"},
{fooValue:"3", fooText:"option C"}
], 
myNewOptionData = [
{myValue:"5", myText:"option E"},
{myValue:"6", myText:"option F"},
{myValue:"7", myText:"option G"},
{myValue:"8", myText:"option H"}
];
document.querySelector("#frm").innerHTML=mkSelect(myOptionData)+"<br>"
+mkSelect(myNewOptionData);

<form id="frm"></form>

该函数需要改进，因为它暂时依赖于对象o的属性顺序。也许可以检查属性名是否包含"值";和"Text" ?

下面是我的代码片段的一个小变化，检查部分属性名。现在，给定选项属性的顺序是无关紧要的，所选选项也可以通过提供包含"select"的属性来定义。在其名称中:

function mkSelect(data){
const arr=data.map(o=>Object.fromEntries(Object.entries(o).map(([k,v])=>
[k.replace(/.*value.*/i,"val")        // generate an object with standardised key names:
.replace(/.*text.*/i,"txt")         // ===> val, txt and sel
.replace(/.*select.*/i,"sel"),
v])));
return "<select><option value='0'></option>"  // build the actual select element:
+arr.map(o=>`<option value="${o.val}"${o.sel?` selected="${o.sel}"`:""}>${o.txt}</option>`).join("")+"</select>"
}
const myOptionData = [
{fooValue:"1", fooText:"option A"},
{fooValue:"2", fooText:"option B", thisIsSelected: true},
{fooValue:"3", fooText:"option C"},
{thisTextIsGreatToo:"option D", andValueThis:"4"}
], 
myNewOptionData = [
{myValue:"5", myText:"option E"},
{myValue:"6", myText:"option F"},
{myValue:"7", myText:"option G"},
{selectThis: 1, myLastText:"option H", myLastValue:"8"}
];
document.querySelector("#frm").innerHTML=mkSelect(myOptionData)+"<br>"+mkSelect(myNewOptionData)

<form id="frm"></form>

Answer 2

通常在创建函数时，您应该期望接收带有定义键的参数。要求列表中的对象具有fooValue &fooText。但是如果你想让它与属性无关:

function createSelect(options, valueName, textName) {
const select = `<select><option value='0'></option>
${options.map(option => `<option value="${option[valueName]}">${option[textName]}</option>`)}
</select>`;
return select;
}
console.log(
createSelect([{randomValue: 1, randomName: 'Go select!'}], 'randomValue', 'randomName')
);

注意在这种情况下不需要jQuery。Map是一个函数，它可以转换列表中的每一项(不修改它)

如果你想"只指定一次键，然后重用"，你可以创建部分应用的函数:

const createSelect = (valueName, textName) => (options)=> {
return `<select><option value='0'></option>
${options.map(option => `<option value="${option[valueName]}">${option[textName]}</option>`)}
</select>`;
}

const fooList = [{fooValue: 1, fooName: 'Foo select!'}];

const fooSelect = createSelect('fooValue', 'fooName');
console.log(
fooSelect(fooList) 
);

const barList = [{barValue: 2, barName: 'Bar select!'}];

const barSelect = createSelect('barValue', 'barName');
console.log(
barSelect(barList) 
);