JSON对象/数组的嵌套结构:HTML选择列表

Question

我在JSON对象/数组的结构方面遇到了困难，我需要将其显示在页面上的选择列表中。

{ 
"DOMAINORIGIN": {
"CIDR.DOMAIN.NAME": [
"10.255.255.255",
"172.31.255.255"
],
"NIC.DOMAIN.NAME": [
"192.168.255.255",
"192.168.255.255",
"255.255.255.128"
]
}
}

$.ajax({
type: 'GET',
url: "/smisc/api/DOMAINORIGIN.log",
dataType: "json",
async: true
}).done(function(data) {
var json = JSON.stringify(data.DOMAINORIGIN); 
alert(json);
});

我需要解析来自上面json对象的数据。并将我的选择列表中的数据显示为

<select name="iplist" id="iplist">

CIDR.DOMAIN.NAME   //optgroup
10.255.255.255
172.31.255.255
NIC.DOMAIN.NAME   // optgroup
192.168.255.255
192.168.255.255
255.255.255.128

每次调用ajax url时，optgroup名称中的标识符(即"CIDR"、"NIC"(都会发生变化，但".DOMAIN.name"保持不变。不知道如何将JSON数据放入选择框中。请指导如何做？

更新：(感谢Rk003(

var listArray = Object.keys(data["DOMAINORIGIN"]);
//alert(listArray);
var cidr_array = data.DOMAINORIGIN[listArray[0]];
var nic_array = data.DOMAINORIGIN[listArray[1]];
$("body").append('<select name="iplist" id="iplist"></select>');
$.each(data.DOMAINORIGIN, function (key,val){
$("#iplist").append("<optgroup label='"+key+"'></optgroup>");
});
$.each(cidr_array, function(index,val){
$("optgroup").eq(0).append("<option value='"+val+"'>"+val+"</option>");
});
$.each(nic_array, function(index,val){
$("optgroup").eq(1).append("<option value='"+val+"'>"+val+"</option>");
});

Answer 1

var data = { 
"DOMAINORIGIN": {
"CIDR.DOMAIN.NAME": [
"10.255.255.255",
"172.31.255.255"
],
"NIC.DOMAIN.NAME": [
"192.168.255.255",
"192.168.255.255",
"255.255.255.128"
]
}
};
var createDropdown = function(data) {
var selectElement = document.getElementById('iplist');
selectElement.innerHTML = '';
Object.keys(data["DOMAINORIGIN"]).forEach(key => {
var optGroupElement = document.createElement('optgroup');
optGroupElement.setAttribute('label', key);
data["DOMAINORIGIN"][key].forEach(ip => {
var optionElement = document.createElement('option');
optionElement.setAttribute('value', ip);
optionElement.innerHTML = ip;
optGroupElement.appendChild(optionElement);
});
selectElement.appendChild(optGroupElement);
});
};

调用调用JSON.stringify(data);的函数createDropdown(data);

Answer 2

很难理解，但最适合动态生成的JSON:

var data = { 
"DOMAINORIGIN": {
"CIDR.DOMAIN.NAME": [
"10.255.255.255",
"172.31.255.255"
],
"NIC.DOMAIN.NAME": [
"192.168.255.255",
"192.168.255.255",
"255.255.255.128"
],
"SOME DATA": [
"192.168...",
"192.168...",
"255.255..."
]
}
}
$.each(data, function (key,val){
$("body").append("<select></select>");
let count=0;
$.each(val, function (key2,val2){
$("select").append("<optgroup label='"+key2+"'></optgroup>");
$.each(val2, function (index,val3){
$("optgroup").eq(count).append("<option value='"+val3+"'>"+val3+"</option>");
});
count++;
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>