如何在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 >";

//But I want to make it more flexible, so that I can reuse it in making another <option> from another array of JSON, like this scenario:

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

//Now I cannot use the method above

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>"}) 
       + "</select >";
}

fields+=mkSelect(myOptionData)
       +mkSelect(newOptionData);