JSONオブジェクトから選択フォーム属性を作成

Question

私のjsonオブジェクトのキーと値から選択ドロップダウンを作成しようとしていますが、キー値ペアを一緒に取得できません。 。以下は私が今までに完成したものです。

これは私が見て選択オプションをご希望の方法です：

<select id="optSelect"> 
    <option value="key1">value1</option> <!-- should come from name1 --> 
    <option value="key1">value2</option> <!-- should come from name2 --> 
</select> 

は、私は別の配列は、各キーの値を保持し、その後、私は私の選択オプションを構築するかがある場合に応じて参照するようにする必要があります別の方法または方法？

var someObject = { 
     "Name1": { 
      "key1": "value1", 
     }, 
     "Name2": { 
      "key1": "value2", 
     } 
    } 


    var objArray = []; 

    for(var i in someObject){ 
     var key = someObject[i]; 
     for(var x in key1){ 
      var nextKey = x; 
      var nextVal = key1[x]; 
      someObject.push(nextKey); 
     } 
    } 

    var optionSelect = document.getElementById("optSelect"), 
     selectList = document.createElement("select"); 

    selectList.id = "mySelect"; 
    optionSelect.appendChild(selectList); 

    for (var i = 0; i < objArray.length; i++) { 
     var option = document.createElement("option"); 
     option.value = objArray[i]; // need to get key1 in here for each value in someObject 
     option.text = objArray[i]; // need to get value 1 or 2 etc in here for each value name in someObject 
     selectList.appendChild(option); 
    } 

Answer 1

for(var x in key1){ここでkey1は未定義です。修正する必要があります。次に、objArrayですべてのキーの値のペアを保存する必要があります。キーの値のペアを後で使うのが難しくなります。ただ、よりエレガントな

var someObject = { 
 
     "Name1": { 
 
      "key1": "value1", 
 
     }, 
 
     "Name2": { 
 
      "key1": "value2", 
 
     } 
 
    } 
 

 

 
    var objArray = []; 
 

 
    for(var i in someObject){ 
 
     var key1 = someObject[i]; 
 
     for(var x in key1){ 
 
      objArray.push({'key' : x, 'val' : key1[x]}); 
 
     } 
 
    } 
 

 
    var optionSelect = document.getElementById("optSelect"), 
 
     selectList = document.createElement("select"); 
 

 
    selectList.id = "mySelect"; 
 
    optionSelect.appendChild(selectList); 
 

 
    for (var i = 0; i < objArray.length; i++) { 
 
     var option = document.createElement("option"); 
 
     
 
     option.value = objArray[i].key; // need to get key1 in here for each value in someObject 
 
     option.text = objArray[i].val; // need to get value 1 or 2 etc in here for each value name in someObject 
 
     optionSelect.appendChild(option); 
 
    }

<select id="optSelect"> 
 

 
</select>

Answer 2

だけ各値のキー

Object.values(someObject).forEach(entry => { 
    Object.keys(entry).forEach(key => { 
    let option = document.createElement('option') 
    option.value = key 
    option.text = entry[key] 
    selectList.appendChild(option) 
    }) 
}) 

リファレンスその後、元のオブジェクト値を反復：

• Object.values()
• Object.keys()
• Array.prototype.forEach()

Answer 3

：あなたはまた、なぜあなたはSelectListのを作成し、optionSelectにそれを追加している、objArray内のオブジェクトをプッシュすることができます、あなただけの直接このような何かをoptionSelectためにあなたのオプションを追加することができますそれを置くために、多分、道:)

var values = Object.values, 
 
    keys = Object.keys, 
 
    s = document.createElement('select'), 
 
    someObject = { 
 
    "Name1": { 
 
     "key1": "value1", 
 
    }, 
 
    "Name2": { 
 
     "key1": "value2", 
 
    } 
 
    }; 
 

 
values(someObject).forEach((o) => { 
 
    var opt = document.createElement('option'); 
 
    opt.setAttribute('value', keys(o)[0]); 
 
    opt.innerHTML = values(o)[0]; 
 
    s.appendChild(opt); 
 
}); 
 

 
document.body.appendChild(s);