JSON对象内嵌套JSON对象

Nested JSON Objects Within JSON Object

本文关键字：JSON 对象 嵌套      更新时间：2023-09-26

我正在尝试动态地构建一个菜单，我将把数据输出到以下形式的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])
    }
 }

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

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

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

基于Paul的回答，这里有一个函数将这个JSON呈现为一个菜单(演示):

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

我会重新组织你的结构，使它很容易循环和建立菜单:

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

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

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

{ 
   text: "Link #1"
   href: "..."
   children: [{
      text: "Link #2",
      href: "...",
      children: []
   }, {
      text: "Link #3",
      href: "...",
      children: [{
          text: "Link #4",
          href: "...",
          children: []
      }]
   }]
}
当然，这假设你只有一个根链接。因此，如果你想要更多，你实际上可以有一个"树"数组，像这样: 
[{ 
   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: []
   }]
}]

我不认为模式是个好主意，原因有二:

  • JSON对象无序 -我猜你想编码子菜单的顺序。
  • 你不能有一个标题为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":"#"
        }]
    }]
}
相关文章：