使用Javascript或Jquery或AngularJS从非常动态(典型的JSON结构)创建动态导航菜单?

时间:2017-06-10 15:07:20

标签: javascript jquery angularjs json menu

我必须创建一个基于来自服务器的动态JSON的菜单,就像这样。

    [  
   {  
      "something":[  
         {  
            "something":[  
               "something",
               "something"
            ]
         },
         {  
            "something":[  
               "something",
               "something",
               {  
                  "something":[  
                     "something",
                     "something"
                  ]
               }
            ]
         },
         "something"
      ]
   },



   {  
      "something":[  
         "something",
         "something",
         "something"
      ]
   },


   {  
      "something":[  
         {  
            "something":[  
               {  
                  "something":[  
                     "something",
                     {  
                        "something":[  
                           "something",
                           "something"
                        ]
                     },
                     "something"
                  ]
               },
               "something",
               "something"
            ]
         },
         "something",
         "something"
      ]
   },{
     "something":[  
         "something"
      ]
   }
]
enter code here

所以我尝试解析它然后让我感到震惊的是这个结构在本质上也是动态的,所以我的循环不会工作。

我正在寻找一些用于开发片段的输入,该片段基于将来自服务器的JSON(也是动态的)动态创建菜单。

1 个答案:

答案 0 :(得分:0)

使用像

这样的递归函数
function parse(object, id)
{
    if(Array.isArray(object))  //array
    {
        object.forEach(function(a){
            parse(a,id);
        });
    }
    else if(typeof object == 'object')  //JSON object
    {
        var index = 0;
        for (var k in object) {
            $(".list" + id).append("<div class='list" + id.toString() + index.toString() + "'>" + k + "</div>");
            index++;
            parse(object[k],id.toString() + index.toString());
        }
    }
    else  //string
    {
        $(".list" + id).append("<div class='list" + id.toString() + "0'>" + object + "</div>");
    }
}
parse(obj,"0");

obj是调用此函数的主要对象。它以递归方式检查对象类型,并将其嵌入到具有唯一ID的div中。

由于您的对象格式不正确,我还没有对其进行测试。获得基本知识,因为键应该是唯一的等等。这应该给你一个如何继续的提示