javascript - 列出按键分组的数组内容

Question

如果我的术语不正确，我深表歉意——这绝对不是我的专业领域。

我想制作一个 <select>从 json 文件中列出，并将条目分组在 <optgroup> 中由一把 key 。我已经成功地列出了选择中的所有条目，但不知道如何循环遍历并将项目嵌套在它们的键下。

我的 JSON 看起来像这样:

[
    {
        "Type" : "Overdrive",
        "Brand" : "Chase Bliss",
        "Name" : "Brothers",
        "Width" : 2.75,
        "Height" : 4.77,
        "Image" : "public/images/pedals/chasebliss-brothers.png"
    }
]

下面是我如何渲染 <select> :

window.RenderPedals = function(pedals){
    for(var i in pedals) {
        var $pedal = $("<option>"+ pedals[i].Brand + " " + pedals[i].Name +"</option>").attr('id', pedals[i].Name.toLowerCase().replace(/\s+/g, "-").replace(/'/g, ''));
        $pedal.data('width', pedals[i].Width);
        $pedal.data('height', pedals[i].Height);
        $pedal.data('height', pedals[i].Height);
        $pedal.data('image', pedals[i].Image);
        $pedal.appendTo('.pedal-list');
    }
}

我正在寻找的是这个标记:

<select>
    <optgroup label="Chase Bliss">
        <option data-width="..." data-height="..." data-image="...">Chase Bliss Brothers</option>
    </optgroup>
</select>

谁能指出我正确的方向？

Answer 1

您可以使用对象解构获取当前对象的属性，无需 for..in循环，创建一个 <optgroup>带有 label 的元素属性设置为 "Brand" , 追加 <option>至 <optgroup> , 追加 <optgroup>至 <select> .检查是否 <optgroup>具有 label 的元素属性设置为 Brand存在，如果 true , 附加 <option>那个<optgroup> , 否则追加一个新的 <optgroup>元素到 <select>与 html设置为新 <option>元素。

var data = [{
  "Type": "Overdrive",
  "Brand": "Chase Bliss",
  "Name": "Brothers",
  "Width": 2.75,
  "Height": 4.77,
  "Image": "public/images/pedals/chasebliss-brothers.png"
}
, {
  "Type": "Underdrive",
  "Brand": "Bliss Chase",
  "Name": "Sisters",
  "Width": 5.72,
  "Height": 7.74,
  "Image": "public/images/pedals/chasebliss-sisters.png"
 }
 , {
  "Type": "Throughdrive",
  "Brand": "Bliss Chase",
  "Name": "Cousins",
  "Width": 2.75,
  "Height": 4.74,
  "Image": "public/images/pedals/chasebliss-cousins.png"
 }
];

window.RenderPedals = function(pedals) {
  var {Type, Brand, Name, Width, Height, Image} = pedals;
  var option = $("<option>", {
                 text: `${Brand} ${Name}`,
                 id: Name.toLowerCase()
                     .replace(/(\s+)|(['"])/g, (m, p1, p2) => p1 ? "-" : ""),
                 data: {
                   width: Width,
                   height: Height,
                   image: Image
                 }
               });
  if ($("optgroup").is(`[label="${Brand}"]`)) {
    $(`optgroup[label="${Brand}"]`).append(option);
  } else {
    $("<optgroup>", {
      label: Brand,
      html: option
    }).appendTo(".pedal-list");
  }
}

data.forEach(RenderPedals);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select class="pedal-list"></select>