如何在javascript中遍歷一個JSON陣列？并用它來填充<option>元素-有解無憂

我有這個 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 >";

//但我想讓它更靈活，這樣我就可以重用它來<option>從另一個 JSON 陣列創建另一個陣列，就像這個場景：

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

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

uj5u.com熱心網友回復：

簡單地將整個操作變成一個函式：

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>

該功能應該改進，因為它暫時依賴于 object 屬性的順序o。也許可以檢查屬性名稱是否包含“值”和“文本”？

這是我的代碼片段的一個細微變化，用于檢查部分屬性名稱。現在，給定選項屬性的順序是無關緊要的，也可以通過提供名稱中包含“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>

uj5u.com熱心網友回復：

如果您使用 jQuery 功能創建元素，您還可以使用方法來設定值 ( .val()) 和文本 ( .text())。這比容易出錯的字串連接要好。

然后有一個單一的功能來重用這樣$.each()的Object.keys()資料。

var myOptionData = [
  { fooValue: "1", fooText: "option A" },
  { fooValue: "2", fooText: "option B" },
  { fooValue: "3", fooText: "option C" }
];
var myNewOptionData = [
  { myValue: "5", myText: "option E" },
  { myValue: "6", myText: "option F" },
  { myValue: "7", myText: "option G" },
  { myValue: "8", myText: "option H" }
];

function fillOptions(data, target){
  $.each(data, function(index,item){
    const itemKeys = Object.keys(item)
    const $option = $("<option>").val(item[itemKeys[0]]).text(item[itemKeys[1]])
    target.append($option)
  })
}

// First create a select element
const $selectElement = $("<select>")

// Then use the function to fill it with options
fillOptions(myOptionData, $selectElement)
fillOptions(myNewOptionData, $selectElement)

// And finally append it somewhere...
$("#result").append($selectElement)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="result"></div>

uj5u.com熱心網友回復：

通常，在創建函式時，您應該期望接收帶有已定義鍵的引數。要求串列中的物件具有 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) 
    );

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534749.html

標籤：javascript查询

上一篇：洗掉按鈕從資料庫中洗掉記錄，但不從前端洗掉記錄

下一篇：單選按鈕管理-當我選擇一個時，它會自動選擇另一個jQuery