需要帮助迭代复杂的Json（没有jquery）

I need to create a symfony2 bundle that generates a sidebar from a YAML file

我需要创建一个symfony2包,从YAML文件生成侧栏

I created this YAML structure

我创建了这个YAML结构

Sidebar:
  - Frontpage:
        - Dashboard:
            _icon: 'icon-home'
            _route: 'link'
  - Actions:
          - My_Likes:
              _icon: 'icon-dislike'
              _route: 'link'
          - My_Dislikes:
              _icon: 'icon-home'
              _route: 'link'
  - Interests:
          - Add_Interest:
              _icon: 'icon-home'
              _route: 'link'

which returns this JSON as a response.

它将此JSON作为响应返回。

{
  "Sidebar": [
    {
      "Frontpage": [
        {
          "Dashboard": {
            "_icon": "icon-home",
            "_route": "link"
          }
        }
      ]
    },
    {
      "Actions": [
        {
          "My_Likes": {
            "_icon": "icon-dislike",
            "_route": "link"
          }
        },
        {
          "My_Dislikes": {
            "_icon": "icon-home",
            "_route": "link"
          }
        }
      ]
    },
    {
      "Interests": [
        {
          "Add_Interest": {
            "_icon": "icon-home",
            "_route": "link"
          }
        }
      ]
    }
  ]
}

Using ajax, the json is returned on the 'data' variable on the client side

使用ajax,json在客户端的'data'变量上返回

Sidebar.model.request(function(data)
{ 
    for(var a=0; a< data.Sidebar.length; a++ )
    {
       console.log(data.Sidebar[a]);
    }
});

I need to find a way to iterate through the parents and find the corresponding children. I only need help creating the for loop, so a solution using console.log(data[stuff]); would be enough

我需要找到一种方法来遍历父母并找到相应的孩子。我只需要帮助创建for循环,所以使用console.log(data [stuff])的解决方案;就足够了

---

EDIT: here is the adjusted snippet of Daniel Rosano's code

编辑:这是丹尼尔罗萨诺的代码的调整片段

    Sidebar.model.request(function(data)
    { 
        //Get Sidebar items
        var SidebarItems = data.Sidebar;

        //Find Categories in Sidebar Items
        for(var a=0; a< SidebarItems.length; a++ )
        {
            var category = SidebarItems[a];

            //Get Category name and append it to sidebar
            var category_name = getSubitemName(category);
            Sidebar.view.renderCategory(category_name);

            //find subitems in categories
            for(var b=0; b < category[category_name].length; b++)
            {
                var button = category[category_name][b];
                var button_name = getSubitemName(button);

                var button_attributes = button[button_name];

                console.log(button_attributes['_icon']);
                Sidebar.view.renderButton(button_name);
            }
        }

        function getSubitemName(parent)
        {
            for(child in parent)
            {
                return child.toString();
            }
        }
    });

this is the result, thanks Daniel

这是结果,谢谢丹尼尔

3 个解决方案

#1

Not sure if this is what you need

不确定这是否是你需要的

for (var a = 0; a < t.Sidebar.length; a++) {
  var children = t.Sidebar[a];
  for (k in children) {
    var subchild = children[k];
    for (m in subchild) {
      var sschild = subchild[m];
      for (n in sschild) {
         // menu variable has the inner childs (having "_icon" and "_route")
         var menu = sschild[n];
         console.log(menu._icon+ " "+menu._route);
      }
    }
  }
}

Hope it helps

希望能帮助到你

Dan

#2

I know you've already accepted an answer, but I had already written this and then got distracted before posting so I thought I'd share it anyway.

我知道你已经接受了答案,但我已经写过这篇文章然后在张贴之前分心了所以我想我还是会分享它。

It's a recursive iterator that walks through any arrays or objects it finds in whatever you pass in. It also keeps track of the "path" down to any particular item and the level (mostly for illustrative purposes, but it could be otherwise useful too). A general purpose iterator that would work for any data passed in, pretty much has to be recursive to handle arbitrary depth.

它是一个递归迭代器,它遍历任何传入的数组或对象。它还跟踪任何特定项目和级别的“路径”(主要用于说明目的,但它也可能有用) 。对于传入的任何数据都可以使用的通用迭代器,几乎必须递归才能处理任意深度。

function iterate(item, path, level) {
    level = level || 0;
    path = path || "root";
    if (typeof item === "object") {
        if (Array.isArray(item)) {
            out("iterating array: " + path, level);
            for (var i = 0; i < item.length; i++) {
                iterate(item[i], path + "[" + i + "]", level + 1);
            }
        } else {
            out("iterating object: " + path, level);
            for (var prop in item) {
                // skip any properties on the prototype
                if (item.hasOwnProperty(prop)) {
                    iterate(item[prop], path + "." + prop, level + 1);
                }
            }
        }
    } else {
        // leaf level property
        out(path + " = " + item, level);
    }
}

Working demo to see how the path and level work: http://jsfiddle.net/jfriend00/k8aosv59/

工作演示,了解路径和级别如何工作:http://jsfiddle.net/jfriend00/k8aosv59/

#3

You can do it recursively:

你可以递归地做到:

function iterate(obj) {
    console.log(obj);

    for (var key in obj) {

        var items = obj[key];

        for(var i=0,l=items.length;i<l;i++) {
            iterate(items[i]);
        }
    }
}

iterate(data);

Fiddle