Javascript 从JSON对象创建HTML选择

我正在尝试填充此HTML选择

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

使用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，直到在本例中达到TotGroups

有什么想法吗

更新：已解决

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

---

如果您想对javascript对象中的所有属性进行迭代，您可以使用，如下所示。确保检查对象的直接属性是否为

请注意，for…in循环以任意顺序迭代对象的属性，因此不能保证顺序

如果值的顺序很重要，请使用。我已经更新了下面的示例，因此它展示了如何使用数组来实现这一点

风险值数据={ 组1:TestGroup1， 组2:TestGroup2 }; 对于数据中的var prop{ ifdata.hasOwnPropertyprop{ $'list'。追加+数据[prop]+''； } } var otherData={listOptions:['Option 1'、'Option 2'、'Option 3']}

---

forvar i=0；i如果您想对javascript对象中的所有属性进行迭代，可以使用，如下所示。确保检查对象的直接属性是否为

请注意，for…in循环以任意顺序迭代对象的属性，因此不能保证顺序

如果值的顺序很重要，请使用。我已经更新了下面的示例，因此它展示了如何使用数组来实现这一点

风险值数据={ 组1:TestGroup1， 组2:TestGroup2 }; 对于数据中的var prop{ ifdata.hasOwnPropertyprop{ $'list'。追加+数据[prop]+''； } } var otherData={listOptions:['Option 1'、'Option 2'、'Option 3']}

---

forvar i=0；我你可以这样做

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

---

这仍然适用于您当前的JSON结构，使用for需要删除TotGroups，我不知道您是否可以使用外部数据

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

---

这仍然适用于您当前的JSON结构，使用for需要删除TotGroups，我不知道您是否可以使用外部数据迭代对象并使用其键获取值：

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开始，直到n-1。

迭代对象并使用其键获取值：

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开始，直到n-1。

如果要使用核心java脚本编写代码，而不在JS代码中混合任何html代码

尝试以下解决方案-

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-

如果您想使用核心java脚本编写代码，而不在JS代码中混合任何html代码

尝试以下解决方案-

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-

非常乐意帮助：非常乐意帮助：