Question

我正在尝试动态构建菜单，我将把数据输出到以下形式的JSON对象。

"Link 1": {
    "href":"#",
    "Sub Link 1": {
        "href":"#"
    },
    "Sub Link 2": {
        "href":"#",
        "Sub Sub Link 1": {
            "href":"#"
        },
        "Sub Sub Link 2": {
            "href":"#"
        }       
    }       
}

首先，我想知道这是否是链接层次结构的好设计。

另一方面，当我在数组上进行迭代时，我只能获得名称“Link 1”，而不能获得链接层次结构下的任何属性。

我正在使用的循环如下：

for(var item in jsonMenu) {
    console.log(item)
}

输出：Link 1, Link 2, Link 3 但我希望能够访问该对象内的其他JSON对象。

我尝试嵌套另一个循环，但我得到的是数字：0, 1, 2, 3我怀疑是字符串的长度。

我也尝试过使用：

item.hasOwnProperty(key)

但它不起作用：它返回Uncaught Reference Error: key does not exist

非常感谢任何帮助

编辑：

这是迄今为止我所拥有的，但在我看来，对于一个菜单来说，开销过多，到目前为止它的执行时间为O（n ^ 2），我仍需要深入一级，所以执行时间为O（n ^ 3）：

 for(var item in jsonMenu) {
     if(jsonMenu.hasOwnProperty(item)) {
        for(var attr in jsonMenu[item]) {   
            console.log(attr);
        }
        console.log(item + " => " + jsonMenu[item])
    }
 }

Answer 1

如果可能的话，我建议重组源数据，使名称是对象的属性而不是键名本身，如下所示：

{
    "name": "Link 1"
    "href":"#",
    "children": [
    {
        "name": "Sub Link 1"
        "href":"#"
    }       
}

这是更好的语义，允许您轻松添加其他属性，并且更容易处理，并且可能更容易生成，因为它更好地匹配大多数编程语言中的对象。否则，您将假设对象中的每个键都是一个新节点。

Answer 2

在Paul的答案的基础上，这是一个将此JSON呈现为菜单（demo）的函数：

<ul id='menu'></ul>
<script>
  var links = {
    "name": "Link 1",
    "href": "#link1",
    "children": [{
        "name": "Sub Link 1",
        "href": "#subLink1"
    }]
  },
  render = function (parent, link) {
    var element = $("<li><a href='" + link.href + "'>" + link.name + "</a></li>"),
        sublist,
        child;
    if (link.hasOwnProperty('children') && link.children.length > 0) {
        sublist = $("<ul></ul>");
        for (child = 0; child < link.children.length; child++) {
            render(sublist, link.children[child]);
        }
        element.append(sublist);
    }
    parent.append(element);
  };
  render($('#menu'), links);
</script>

Answer 3

我会重新组织你的结构，以便让它很容易循环并构建菜单：

{
    "Links": [{
        "href": "#",
        "Links": [{
            "href": "#",
            "Links": [{ "href": "#" }, { "href": "#" }]
         }]
    }];
}

这将允许您使用递归循环方法，其中所有命名约定都相同。

Answer 4

这似乎是完美的树状结构，其中text是属性，属性的值是链接的内部文本。这是一个更灵活的结构，因为您不必手动迭代对象的属性以找出内部文本的值。

{ 
   text: "Link #1"
   href: "..."
   children: [{
      text: "Link #2",
      href: "...",
      children: []
   }, {
      text: "Link #3",
      href: "...",
      children: [{
          text: "Link #4",
          href: "...",
          children: []
      }]
   }]
}

当然，这假设您只有一个 root 链接。因此，如果你想要更多，你可以基本上拥有一系列“树”，如下所示：

[{ 
   text: "Link #1"
   href: "..."
   children: [{
      text: "Link #2",
      href: "...",
      children: []
   }, {
      text: "Link #3",
      href: "...",
      children: [{
          text: "Link #4",
          href: "...",
          children: []
      }]
   }]
}, {
   text: "Link #5",
   href: "...",
   children []
}, {
   text: "Link #6",
   href: "...",
   children: [{
      text: "Link #7",
      href: "...",
      children: []
   }]
}]

Answer 5

我认为架构不是一个好主意，原因有两个：

JSON objects 无序 - 我想你想编码子菜单的顺序。
你不能拥有标题为href的子菜单（也许你以后想要添加其他属性）

更好地使用对象数组，children属性是另一个数组。迭代也更容易。像

这样的东西

{
    "name": "Link 1",
    "href":"#",
    "children": [{
        "name": "Sub Link 1",
        "href":"#"
    }, {
        "name": "Sub Link 2",
        "href":"#",
        "children": [{
            "name": "Sub Sub Link 1",
            "href":"#"
        }, {
            "name": "Sub Sub Link 2",
            "href":"#"
        }]
    }]
}

JSON对象中的嵌套JSON对象

5 个答案: