Вложенная структура объектов / массивов 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

Трудно понять, но лучше всего для динамически генерируемого 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>

Answer 2

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

вызов функции createDropdown(data);, куда вы звоните JSON.stringify(data);