如何在JavaScript中遍历JSON数组并将其用于填充<select>元素？

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"}
] 

//现在我不能使用上述方法

- Xon Version9

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的属性顺序。也许可以检查属性名是否包含“Value”和“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>

- Carsten Massmann

---

是的，我刚注意到它并相应地更改了我的答案。 - Carsten Massmann

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) 
    );
    

- Darío Kozicki