Question

我想用来自JSON提要的数据填充选择框。我的函数确实读取了json，并在其值之间循环。

我得到的结果不是我期望的结果，循环中出了点问题。

我的json：

   "case": {
      "1": {
        "id": "47",
        "name": "Stahl",
        "n": 239
      },
      "2": {
        "id": "111",
        "name": "Titan",
        "n": 16
      }
    },

我的功能：

  if (obj.facetes.case  ){
    $('#case_m').selectmenu( "enable" );
    $.each(obj.facetes.case, function(key,valueObj){
          Object.keys(valueObj || {}).forEach(function(k) {
          $('#case_m').append(
            $('<option></option>').val(valueObj['id']).html(valueObj['name'] + ' ('+valueObj['n']+')')
          );
       })
     })
  }
  else{
    $('#case_m').selectmenu( "disable" );
  }

结果：

<select name="case_m" id="case_m" data-mini="true" class="filter_watch">
    <option>Material Gehäuse auswählen</option>
    <option value="47">Stahl (239)</option>
    <option value="47">Stahl (239)</option>
    <option value="47">Stahl (239)</option>
    <option value="111">Titan (16)</option>
    <option value="111">Titan (16)</option>
    <option value="111">Titan (16)</option>
</select>

值是该值的三倍，与每个项目的元素数量相同。如何更改功能以获得独特的结果？

Answer 1

正如罗里（Rory）所提到的，问题出在您实际上不需要的通过Object.keys的内部循环。我写了一个略有不同的逻辑。

var obj = {};
obj.facetes = {};
obj.facetes = {"case": {
      "1": {
        "id": "47",
        "name": "Stahl",
        "n": 239
      },
      "2": {
        "id": "111",
        "name": "Titan",
        "n": 16
      }
    }
}

if (obj.facetes.case  ){

    $.each(obj.facetes.case, function(key, value) {   
         $('#case_m')
             .append($("<option></option>")
                        .attr("value",value['id'])
                        .text(value['name']+' ('+value['n']+')')); 
    });

  }
  else{
    $('#case_m').selectmenu( "disable" );
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="case_m" id="case_m" data-mini="true" class="filter_watch">
</select>

Answer 2

问题是由于您实际上不需要通过Object.keys的内部循环造成的。您可以直接从valueObj（例如valueObj.name）访问属性。

话虽如此，您可以通过使用map()构建HTML字符串数组来填充select来使代码更简洁，例如：

var obj = {
  facetes: {
    "case": {
      "1": { "id": "47", "name": "Stahl", "n": 239 },
      "2": { "id": "111", "name": "Titan", "n": 16 }
    }
  }
}

if (obj.facetes.case) {
  // $('#case_m').selectmenu("enable");

  var options = Object.keys(obj.facetes.case).map(function(k) {
    var item = obj.facetes.case[k];
    return `<option value="${item.id}">${item.name} (${item.n})</option>`;
  });
  $('#case_m').append(options);
} else {
  // $('#case_m').selectmenu("disable");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="case_m" id="case_m" data-mini="true" class="filter_watch">
  <option>Material Gehäuse auswählen</option>
</select>

请注意，由于该代码段不包含该库，因此我只注释了selectmenu()引用。

如果存在多个值，如何循环遍历json项目？

2 个答案: