我对JSON

时间：2018-03-10 00:04:41

标签： javascript html json class

我必须从JSON创建一个菜单树。

JSON看起来像这样：

[  
    {  
       "For Home Products":[  
          "Menu Free Antivirus",
          "Menu Premium",
          "Menu Internet Security"
       ]
    },
    {  
       "For Business Products":[  
          {  
             "Client/Servers":[  
                "Menu Professional Security",
                "Menu Server Security",
                "Menu Business Security Suite",
                "Menu Endpoint Security"
             ]
          },
          {  
             "Integration":[  
                "Anti-Malware",
                "Antispam SDK (SPACE)",
                "Rebranding & Bundling",
                "Integration Services"
             ]
          },
          "Small Business",
          "Managed Services",
          {  
             "Gateways":[  
                "Menu MailGate",
                "Menu MailGate Suite",
                "Menu AntiVir Exchange",
                "Menu WebGate",
                "Menu WebGate Suite",
                "Menu GateWay Bundle",
                "Menu SharePoint"
             ]
          }
       ]
    }
 ]

我试图解决问题的方式如下：

function setData(data) {
    console.log(data);
    $.each(data, function(key1, value1) {

        $.each(value1, function(key2, value2) {
            var x = document.createElement("ul");
            x.setAttribute("id", key2);
            document.body.appendChild(x);
            $.each(value2, function(key3, value3) {
                // console.log(value3);
                var z = document.createElement("li");
                z.setAttribute("id", value3);
                document.getElementById(key2).appendChild(z);
                console.log(value3);


            })
        })
    })
    return setData;
}

setData(data);

现在，我的问题是没有正确添加类。 e.g：

 <li id="[object Object]"></li>

我知道这个错误是因为我试图从一个对象上创建一个类，但我现在试图解决这个问题两个小时，我找不到正确的方法这样做没有硬编码。

输出

enter image description here

代码段（运行）

＆＃13;
＆＃13; 
var data = [  
    {  
       "For Home Products":[  
          "Menu Free Antivirus",
          "Menu Premium",
          "Menu Internet Security"
       ]
    },
    {  
       "For Business Products":[  
          {  
             "Client/Servers":[  
                "Menu Professional Security",
                "Menu Server Security",
                "Menu Business Security Suite",
                "Menu Endpoint Security"
             ]
          },
          {  
             "Integration":[  
                "Anti-Malware",
                "Antispam SDK (SPACE)",
                "Rebranding &amp; Bundling",
                "Integration Services"
             ]
          },
          "Small Business",
          "Managed Services",
          {  
             "Gateways":[  
                "Menu MailGate",
                "Menu MailGate Suite",
                "Menu AntiVir Exchange",
                "Menu WebGate",
                "Menu WebGate Suite",
                "Menu GateWay Bundle",
                "Menu SharePoint"
             ]
          }
       ]
    }
 ]
function setData(data) {
    //console.log(data);
    $.each(data, function(key1, value1) {

        $.each(value1, function(key2, value2) {
            var x = document.createElement("ul");
            x.setAttribute("id", key2);
            document.body.appendChild(x);
            $.each(value2, function(key3, value3) {
                // console.log(value3);
                var z = document.createElement("li");
                z.setAttribute("id", value3);
                z.innerHTML = value3;
                document.getElementById(key2).appendChild(z);
                console.log(value3);


            })
        })
    })
    return setData;
}

setData(data);
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您的JSON与所需的输出不匹配。我在这里修改了JSON以更好地匹配您想要的输出。

此外，您在代码中显示[Object object]的原因是您没有检查value循环中each的类型。数组[]和对象{}都将显示为typeof value==='object'。您也可以查找typeof value==='string'，但在您给出的示例中，它确实是一种或两种问题。所以不一定要做两次检查。

递归可能是一个更好的解决方案。这是一个例子：

＆＃13;
＆＃13; 
function setData(data, el) {
	if(!el.is('ul')) el = $('<ul/>').appendTo(el);
	$.each(data, function(key, value) {
		if(typeof value==='object') {
			if(typeof key==='string') 
				el = $('<li/>').appendTo(el).text(key);
			setData(value, el);
		}
		else $('<li/>').text(value).appendTo(el);
	});
}

// this JSON matches better with your desired output image
// it appears that integration and gateways are "collapsed"
// which would be a simple styling application. If they
// are in fact empty, you could just remove the children items
// from the JSON.
var newData = [  
    {  
       "For Home Products":[  
          "Small Business",
          "Managed Services",
          "Internet Security"
       ]
    },
    {  
       "For Business Products":[  
          {  
             "Client/Servers":[  
                "Professional Security",
                "Server Security"
             ]
          },
          {  
             "Integration":[  
                "Anti-Malware",
                "Antispam SDK (SPACE)",
                "Rebranding &amp; Bundling",
                "Integration Services"
             ]
          },
          "Small Business",
          "Managed Services",
          {  
             "Gateways":[  
                "Menu MailGate",
                "Menu MailGate Suite",
                "Menu AntiVir Exchange",
                "Menu WebGate",
                "Menu WebGate Suite",
                "Menu GateWay Bundle",
                "Menu SharePoint"
             ]
          }
       ]
    }
 ];

setData(newData, $('body'));

// Original JSON which doesn't match desired output
/*
var data = [  
    {  
       "For Home Products":[  
          "Menu Free Antivirus",
          "Menu Premium",
          "Menu Internet Security"
       ]
    },
    {  
       "For Business Products":[  
          {  
             "Client/Servers":[  
                "Menu Professional Security",
                "Menu Server Security",
                "Menu Business Security Suite",
                "Menu Endpoint Security"
             ]
          },
          {  
             "Integration":[  
                "Anti-Malware",
                "Antispam SDK (SPACE)",
                "Rebranding &amp; Bundling",
                "Integration Services"
             ]
          },
          "Small Business",
          "Managed Services",
          {  
             "Gateways":[  
                "Menu MailGate",
                "Menu MailGate Suite",
                "Menu AntiVir Exchange",
                "Menu WebGate",
                "Menu WebGate Suite",
                "Menu GateWay Bundle",
                "Menu SharePoint"
             ]
          }
       ]
    }
 ];

setData(data, $('body'));
*/
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

问题是你的json的级别不统一，所以有时你会返回你想要的名字，而在其他时候这个级别是一个对象，所以你要返回这个对象。您需要在代码中检查以下内容：

$.each(value2, function(key3, value3) {
    // console.log(value3);
    if(typeof value3 !== 'object') {
        var z = document.createElement("li");
        z.setAttribute("id", value3);
        z.innerHTML = value3;
        document.getElementById(key2).appendChild(z);
        console.log(value3);
    } else {
        // Go a level deeper in your json.
    }
});

我所做的就是添加以下支票：

if(typeof value3 !== 'object') {
    // If not object.
} else {
    // If object.
}

上面添加的内容是检查value3变量的类型，如果它不是对象，它将创建li，否则你知道它是一个你可以正确处理它。

相关问题
最新问题