javascript - 创建 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，直到达到 TotGroups(在本例中为 2)。

有什么想法吗？ :)

更新:已解决

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

Answer 1

如果您想迭代 javascript 对象中的所有属性，您可以使用 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>