JSONからHTML選択を作成する

Question

オブジェクト私は（実際のJSONは、以下に示すよりも多くのキーと値が含まれています）JSONからのデータで

<select id="list"> 
</select> 

を選択し、このHTMLを埋めるためにしようとしています：

{"Group1": "TestGroup1", "Group2" : "TestGroup2" "TotGroups" : "2"} 

使い方JQueryとAJAXを使用してデータを取得します。 AJAX成功応答：

success: function(resp) { 
var json_obj = $.parseJSON(resp); 
for (i=1, x=json_obj.TotGroups; i <= x; i++) { 
$('#list').append('<option>'+json_obj.Group1+' </option>'); 
} 

あなたがこれを見ることができるようにのみjson_obj.Group1からのデータを追加します。 ループが実行されるたびに、TotGroupsに達するまで（この場合は2）、一度に1つのグループ、最初のグループ1、次にグループ2を追加します。

アイデア？ :)

UPDATE：あなたは以下に示すように、あなたがfor..in statementを使用して行うことができますjavascriptオブジェクトのすべてのプロパティを反復処理すぎる場合

$('#list').append('<option>'+json_obj["Group" + i]+' </option>'); 

Answer 1

あなたは、これはまだあなたの現在のJSONの構造で動作します

$('#list').append('<option>'+json_obj["Group" + i]+' </option>'); 

ような何かを行うことができます（forを使用すると、あなたがTotGroupsを削除する必要があり、あなたの場合、私は知りませんcan（外部データ））

Answer 2

を解決しました。オブジェクトの直接プロパティがObject#hasOwnPropertyであることを確認してください。

for ... inループは、オブジェクトのプロパティを任意の順序で反復処理するため、順序を保証しないことに注意してください。

値の順序が重要な場合はArrayを使用してください。私は以下の例を更新したので、代わりに配列でこれを行う方法を示しています。

var data = { 
 
    "Group1": "TestGroup1", 
 
    "Group2": "TestGroup2" 
 
}; 
 

 
for (var prop in data) { 
 
    if(data.hasOwnProperty(prop)){ 
 
    $('#list').append('<option>' + data[prop] + ' </option>'); 
 
    } 
 
} 
 

 
var otherData = {listOptions: ['Option 1','Option 2','Option 3']} 
 

 
for(var i = 0; i<otherData.listOptions.length;i++){ 
 
    $('#list2').append('<option>' + otherData.listOptions[i] + ' </option>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select id="list"> 
 
</select> 
 
<select id="list2"> 
 
</select>

Answer 3

オブジェクトを反復し、そのキーを使用して値を取得します。

for (var key in json_obj) { 
    $('#list').append('<option>'+ json_obj[key] +' </option>'); 
} 

あなたはES2015を使用している場合、これは、より簡単に行うことができます。

for (let [k, v] of Object.entries(json_obj)) { 
    // here 'v' represents each group 
    $('#list').append(`<option>${v}</option>`); 
} 

NOTEでは、制御変数をループのnまで0で始まらなければなりません - あなたの場合は1

Answer 4

JSコードの中にhtmlコードを混ぜずにコアのJavaスクリプトを使用してコードを書いてみたいです...

以下の解決策を試してください -

var data = {"Group1": "TestGroup1", "Group2" : "TestGroup2", "TotGroups" : "2"} 
var list_obj = document.getElementById("list"); 
var sel_opt = document.createElement("OPTION"); 
var i = 0; 
for(k in data) { 
    var sel_opt_i = document.createElement("option"); 
    sel_opt_i.setAttribute("value", data[k]) 
    var opt_name_i = document.createTextNode(k); 
    sel_opt_i.appendChild(opt_name_i); 
    list_obj.appendChild(sel_opt_i); 
    i++; 
} 

JS FiddelのURL - https://jsfiddle.net/ryy6d4kf/23/