JSON 对象/数组的嵌套结构： HTML select 列表

Question

I am having difficulty with structure of JSON objects/arrays, which i need to show into select list on my page.

{ 
    "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);
});

I need to parse data from a above json object. and show the data in my select list as

<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

Identifiers in optgroup name ie "CIDR", "NIC" varies each time ajax url is called but ".DOMAIN.NAME" remains constant. Not getting idea how to put this JSON data into the select box. Please guide how to do it?

Update: (Thanks 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);
    });
};

Call the function createDropdown(data); where you are calling JSON.stringify(data);

Answer 2

Difficult to understand, but best for dynamically generated 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>