前端之家

  1. 首页
  2. 问答

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

• 问答

我在处理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,val){
    $("optgroup").eq(1).append("<option value='"+val+"'>"+val+"</option>");
});
zxcvbnmasd1234 回答：JSON对象/数组的嵌套结构：HTML选择列表
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);

,

难以理解，但最适合动态生成的JSON：

var data = { 
    "DOMAINORIGIN": {
        "CIDR.DOMAIN.NAME": [
             "10.255.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>

ajaxjavascript
本文链接：https://www.f2er.com/3142876.html

大家都在问