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，直到达到TotGroups（在这种情况下为2）。

有什么想法吗？：）

更新：已解决

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

Answer 1

如果您想迭代javascript对象中的所有属性，可以使用for..in statement进行迭代，如下所示。确保使用Object#hasOwnProperty检查对象的直接属性。

请注意for ... in循环以任意顺序迭代对象的属性，因此无法保证顺序。

如果值的顺序很重要，请使用Array。我已经更新了下面的示例，因此它显示了如何使用数组执行此操作。

＆＃13;

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>');
}

＆＃13;

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

＆＃13;

Answer 2

你可以做点什么

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

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

Answer 3

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

Node

如果您使用ES2015，可以更轻松地实现这一目标：

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

注意在循环中，控制变量必须以0开始，直到n - 1。

Answer 4

如果你想使用核心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网址 - https://jsfiddle.net/ryy6d4kf/23/

从JSON对象

4 个答案: