我对JSON有一个小问题 [英] I have a small issue with JSON

问题描述

您好，并提前感谢您的帮助！这是我的问题。我必须从JSON创建一个菜单树。

JSON如下所示：

  [
 {
For Home Products：[
Menu Free Antivirus，
Menu Premium，
菜单Internet Security
] 
} ，
 {
For Business Products：[
 {
客户端/服务器：[
菜单专业安全，
菜单服务器安全性，
菜单商业安全套件，
菜单端点安全
] 
}，
 {
集成：[
反恶意软件，
反垃圾邮件SDK（SPACE），
重新品牌和捆绑，
集成服务
] 
 }，
小企业，
托管服务，
 {
网关：[
Menu MailGate，
Menu MailGate Suite，
Menu AntiVir Exchange，
菜单WebGate，
Menu WebGate Suite，
 Menu GateWay Bundle，
Menu SharePoint

} 
] 
} 
] 
  
 
 
我试图解决问题的方式如下所示：
  function setData（data）{
 console.log（data）; 
 $ .each（data，function（key1，value1）{
 $ b $ .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）; 
 
 
}）
}）
}）
返回setData; 
} 
 
 setData（data）; 
  
现在，我的问题是没有正确添加类。例如：
 
 
 < li id =[object Object]>< / li> 
  
我知道这个错误是因为我想从一个对象中创建一个类，但是我我试图解决这个问题现在两个小时，我无法找到正确的方式来做这件事，而没有硬编码它。
 
 
 
输出
 
 
 
  
 
 
 
代码片段（运行）
 
 
 
 
 
 
  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：[捆绑，集成服务]}，小型企业，托管服务，网关，MailGate菜单， 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）。澳鹏dChild（Z）;的console.log（值3）; }}）}）return setData;} setData（data）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>  

解决方案

您的JSON与所需的输出不匹配。

另外，你得到 [Object object]的原因是， code>显示在你的代码中，你没有检查你的中每个的类型 c $ c>循环。数组[]和对象{}都将显示为 typeof值==='object'。您还可以查找 typeof值==='string'，但是在您给出的示例中，它确实是某种/或者问题。所以没有必要做这两项检查。



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



  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）;}）;} //这个JSON匹配用你想要的输出图像更好//看起来集成和网关被折叠//这将是一个简单的样式应用程序。如果他们//实际上是空的，你可以从JSON.var newData = [{For Home Products：[Small Business，Managed Services，Internet Security]} ，{商业产品：[{客户端/服务器：[专业安全，服务器安全]}，{集成：[反恶意软件，反垃圾邮件SDK（SPACE） ，小型企业，托管服务，{网关：[菜单MailGate，菜单MailGate套件，菜单AntiVir交换，菜单WebGate，Menu WebGate Suite，Menu GateWay Bundle，Menu SharePoint ]}]}]; setData（newData，$（'body'））; //原始JSON与所需输出不匹配/ * var data = [{For Home Products：[Menu Free Antivirus， Menu Premium，Menu Internet Security]}，{For Business Products：[{Client / Servers：[Menu Professional Security安全]}，{集成：[反恶意软件，反垃圾邮件SDK（空间），重新品牌&捆绑，集成服务]}，小型企业，托管服务，网关，MailGate菜单， WebGate Suite，Menu GateWay Bundle，Menu SharePoint]}]}]; setData（data，$（'body'））; * /  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery。 min.js>< / script>  

Hello and thank you in advance for your help! Here comes my problem. I have to create a menu tree from a JSON.

The JSON looks like this:

[  
    {  
       "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"
             ]
          }
       ]
    }
 ]

The way I tried to solve the problem looks like this:

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

Now, my problem is that the classes are not added correctly. e.g:

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

I know that the error is because I'm trying to make a class from an object, but I'm trying to solve this problem for two hours now and I can't find the correct way of doing this without hard coding it.

Output

Code Snippet (Run)

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

解决方案

Your JSON doesn't match the desired output. I've modified the JSON here to match better with your desired output.

Also, the reason why you were getting [Object object] showing up in your code is that you weren't checking to see the type of the values in your each loops. Both an array [] and an object {} will show up as typeof value==='object'. You could also look for typeof value==='string', but in your given example it's really sort of an either/or problem. So not really necessary to do both checks.

recursion might be a better solution to this. Here's an example:

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'));
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这篇关于我对JSON有一个小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！