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

optgroup 名称中的标识符，即 "CIDR" ， "NIC" 每次调用 ajax url 时都会发生变化，但 ".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>