オプションを使用してoptgroupをJSONからビルドする方法は？

Question

私は次のようなJSON入力があります。

[ 
    { 
    "No Value in Support": [ 
     { 
     "5": "In house support (HIS)" 
     }, 
     { 
     "6": "No interaction with support (NIS)" 
     }, 
     { 
     "7": "No value in SWR maintenance (NVS)" 
     }, 
     { 
     "8": "Support from other 3rd party (SOT)" 
     } 
    ] 
    } 
] 

と、私はこのような何かを構築しようとしています：

optgroupの labelは、メインアレイ上の value keyある

<select id="sel" name="id"> 
    <optgroup label="Alaskan/Hawaiian Time Zone"> 
    <option value="AK">Alaska</option> 
    <option value="HI">Hawaii</option> 
    </optgroup> 
</select> 

をそれぞれoptionはサブアレイのkeyで、テキストは値です。

たとえば、これは上記のサンプルから予期される出力です：これは私がこれまで何をやったかである

<select id="sel" name="id"> 
    <optgroup label="No Value in Support"> 
    <option value="5">In house support (HIS)</option> 
    <option value="6">No interaction with support (NIS)</option> 
    <option value="7">No value in SWR maintenance (NVS)</option> 
    <option value="8">Support from other 3rd party (SOT)</option> 
    </optgroup> 
</select> 

：

var sel_content = ''; 

    $.each(data, function(idx, arr) { 
    sel_content += '<optgroup label="' + idx + '">'; 
    $.each(arr, function(arr_idx, arr_value) { 
     sel_content += '<option value="' + arr_idx + '">' + arr_value + '</option>'; 
    }); 
    sel_content += '</optgroup>'; 
    }); 

    $('#sel').append(sel_content); 

しかし、あなたはhereを見ればあなたがISNが表示されます私はオブジェクトを値として取得しているため、正しく動作していません。何か助けてくれますか？あなたのJSONはそれはあなたが、配列の最初の項目であるためにあなたのコードを変更する必要があるオブジェクトの単一項目の配列のようなものであるので

Answer 1

あなたのデータアクセスが正しくありません。次のようにイテレータを正しく使用する必要があります。

var data = [{ 
 
    "No Value in Support": [{ 
 
     "5": "In house support (HIS)" 
 
    }, { 
 
     "6": "No interaction with support (NIS)" 
 
    }, { 
 
     "7": "No value in SWR maintenance (NVS)" 
 
    }, { 
 
     "8": "Support from other 3rd party (SOT)" 
 
    }], 
 
    "Not using Software": [{ 
 
     "9": "Business needs changed (BNC)" 
 
    }, { 
 
     "10": "Replaced by GE (RBG)" 
 
    }, { 
 
     "11": "Replaced by Iconics (RBI)" 
 
    }, { 
 
     "12": "Replaced by Others (RBO)" 
 
    }, { 
 
     "13": "Replaced by Rockwell (RBR)" 
 
    }, { 
 
     "14": "Replaced by Siemens (RBS)" 
 
    }] 
 
}]; 
 

 
var sel_content = ''; 
 

 
for (var key in data[0]) { 
 
    sel_content = '<optgroup label="' + key + '">'; 
 
    data[0][key].forEach(function(item) { 
 
     for (var prop in item) { 
 
      \t sel_content += '<option value="' + prop + '">' + item[prop] + '</option>'; 
 
     } 
 
    }); 
 
    sel_content += '</optgroup>'; 
 
    $('#sel').append(sel_content); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="sel" name="id"></select>

UPDATED FIDDLE

Answer 2

：https://jsfiddle.net/y086oomp/4/

：ここ

var sel_content = ''; 

    $.each(data[0], function(idx, arr) { 
    sel_content += '<optgroup label="' + idx + '">'; 
    $.each(arr[0], function(arr_idx, arr_value) { 
     sel_content += '<option value="' + arr_idx + '">' + arr_value + '</option>'; 
    }); 
    sel_content += '</optgroup>'; 
    }); 

    $('#sel').append(sel_content); 

は今働いて、それのフィドルです

Answer 3

純粋なjQueryのを使用して：// HTML

<select id="in"></select> 
<button id="apply">APPLY</button> 

// JavaScriptの

を

var vbin = [ 
     { 
     "No Value in Support": [ 
      { 
      "5": "In house support (HIS)" 
      }, 
      { 
      "6": "No interaction with support (NIS)" 
      }, 
      { 
      "7": "No value in SWR maintenance (NVS)" 
      }, 
      { 
      "8": "Support from other 3rd party (SOT)" 
      } 
     ] 
     } 
    ]; 

    $("#apply").click(function() { 
     $.each(vbin, function(idx, arr) { 
     var $og = $("<optgroup></optgroup>"); 
     for (var k in arr) { 
      $og.attr("label", k); 
      $.each(arr[k], function(ai, av) { 
      var $se = $("<option></option>"); 

      for (var ka in av) { 
       $se.val(ka); 
       $se.text(av[ka]); 
      } 

      $og.append($se); 
      }); 
     } 

     $("#in").append($og); 
     }); 
    }); 

JSON構造のためにちょっと大変ですが、機能します。

ワーキングペン：https://codepen.io/barrychapman/pen/WjLjMd