Создание HTML Выберите из JSON объектов

Question

Я пытаюсь заполнить этот HTML Выберите

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

с данными JSON (фактическая JSON содержит несколько ключей и значений, чем показано ниже):

{"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. То, что я хочу, каждый раз, когда цикл выполняется, добавляет одну группу за раз, сначала группу 1, а затем группу 2, до достижения Тогггрупп (в этом случае 2).

Любые идеи? :)

UPDATE: решаемые

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

Answer 1

вы можете сделать что-то вроде

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

это будет по-прежнему работать с вашей текущей структуры JSON (с помощью for требует удаления TotGroups, и я не знаю, если вы может (внешние данные))

Answer 2

Если вы хотите слишком перебрать все свойства в JavaScript Object вы можете сделать это, используя for..in statement, как показано ниже. Убедитесь, что его прямое свойство объекта с 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>`); 
} 

ПРИМЕЧАНИЕ В цикле переменная управления должен быть начать с 0 до п - 1.

Answer 4

Если вы хотите написать код с помощью основного сценария Java без смешивания любого кода html внутри кода JS ...

Попробуйте ниже решение -

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/