复杂的 JSON 嵌套和循环访问答案

【问题标题】：Complex JSON nesting and accessing through loop复杂的 JSON 嵌套和循环访问
【发布时间】：2016-03-25 21:27:55
【问题描述】：

我在这里回答了之前的一个问题：Populate JSON file data into Array then feed Array into mmenu plugin 这使我能够正确访问我的所有 JSON 数据，但仅限于一个数组。我想让代码进一步扩展，所以我试图嵌套数组以实现这一点。我相信我的问题在于 JSON 嵌套问题，而不是访问数据的循环函数。

这是有效的简单数组解决方案：

带脚本的 HTML：

<nav id="menu">
    <ul>
            <!-- Pavers -->
        <li><a href="#id01" id="menuTitle">Pavers</a>
            <div id="id01"></div>
        </li>

            <!-- Circles -->
        <li><a href="#id02">Circles</a>
            <div id="id02"></div>
        </li>

            <!-- Walls -->
        <li><a href="#id03">Walls</a>
            <div id="id03"></div>
        </li>   
    </ul>
</nav>

<script type="text/javascript">

$(document).ready(function(){
    $.getJSON('menu.json').done(function(data){
        $('#menuTitle').html(data.name);
        var lis = "<ul>"
        for(var i = 0; i < data.pavers.length; i++)
            lis += '<li><a href="'+ data.pavers[i].url+'">' + data.pavers[i].display + "</a></li>";
        lis += "</ul>"
        document.getElementById("id01").innerHTML = lis;
        $('nav#menu').mmenu();
    });
});

</script>

JSON 文件：

{
    "name": "Pavers",
    "pavers": [
        {
            "display": "Brukstone",
            "url": "brukstone.html"
        },
        {
            "display": "Bulovar",
            "url": "pavers/bulovar.html"
        },
        {
            "display": "Cobble",
            "url": "pavers/cobble.html"},
        {
            "display": "Cracovia",
            "url": "pavers/cracovia.html"
        },
        {
            "display": "Filtrapave",
            "url": "pavers/filtrapave.html"
        },
        {
            "display": "Holland",
            "url": "pavers/holland.html"
        },
        {
            "display": "Old Munich",
            "url": "pavers/oldmunich.html"
        },
        {
            "display": "Strassen Classic",
            "url": "pavers/strassen.html"
        },
        {
            "display": "Strassen Bavaria (Tumbled)",
            "url": "pavers/strassenbavaria.html"
        },
        {
            "display": "Strassen Barvaria II (Non-tumbled)",
            "url": "pavers/strassenbavariaii.html"
        },
        {
            "display": "Vavel Stone (Tumbled)",
            "url": "pavers/vavel.html"
        },
        {
            "display": "Vavel Stone II (Non-tumbled)",
            "url": "pavers/vavelii.html"
        }
    ]
}

我的第一个想法和我正在尝试做的是将数据嵌套更深一层以组合数组。之后我只是嵌套了 for 循环以确保可以访问所有内容。

我在嵌套解决方案中的尝试：

带脚本的 HTML：

<nav id="menu">
    <ul>
                <!-- Pavers -->
        <li><a href="#id00" id="menuTitle00">Paver</a>
            <div id="id00"></div>
        </li>

                <!-- Circles -->
        <li><a href="#id01" id="menuTitle01">Circles</a>
            <div id="id01"></div>
        </li>

                <!-- Walls -->
        <li><a href="#id02" id="menuTitle02">Walls</a>
            <div id="id02"></div>

        </li>

    </ul>
</nav>

<script type="text/javascript">
$.getJSON('menu.json').done(function(data){
    // IF SUCCESS
    alert('getJSON request succeeded!');

    for(x=0; x < data.object.length; x++){

        $('#menuTitle0'+x).html(data.object[x].name);
        lis = "<ul>"
        for(i = 0; i < data.object[x].links.length; i++){
            lis += '<li><a href="'+ data.object[x].links[i].url+'">' + data.object[x].links[i].display + "</a></li>";
        }
        lis += "</ul>"
        document.getElementById("id0"+x).innerHTML = lis;
        $('nav#menu').mmenu();
     }})

    // IF FAILURE
    .fail(function(jqXHR, textStatus, errorThrown) { alert('getJSON request failed! ' + textStatus); })

    //IF SCRIPT TRIED TO EXECUTE
    .always(function() { alert('getJSON request ended!'); });
</script>

JSON 文件：

{"object":
    [
        {
            "name": "Pavers",
            "links": [
                {
                    "display": "Brukstone",
                    "url": "brukstone.html"
                },
                {
                    "display": "Bulovar",
                    "url": "pavers/bulovar.html"
                },
                {
                    "display": "Cobble",
                    "url": "pavers/cobble.html"},
                {
                    "display": "Cracovia",
                    "url": "pavers/cracovia.html"
                },
                {
                    "display": "Filtrapave",
                    "url": "pavers/filtrapave.html"
                },
                {
                    "display": "Holland",
                    "url": "pavers/holland.html"
                },
                {
                    "display": "Old Munich",
                    "url": "pavers/oldmunich.html"
                },
                {
                    "display": "Strassen Classic",
                    "url": "pavers/strassen.html"
                },
                {
                    "display": "Strassen Bavaria (Tumbled)",
                    "url": "pavers/strassenbavaria.html"
                },
                {
                    "display": "Strassen Barvaria II (Non-tumbled)",
                    "url": "pavers/strassenbavariaii.html"
                },
                {
                    "display": "Vavel Stone (Tumbled)",
                    "url": "pavers/vavel.html"
                },
                {
                    "display": "Vavel Stone II (Non-tumbled)",
                    "url": "pavers/vavelii.html"
                }
            ]
        }
    ,
        {
            "name": "Circles",
            "links": [
                {
                    "url": "circles/bavaria.html",
                    "display": "Bavaria II Circle"
                },
                {
                    "url": "circles/cobble.html",
                    "display": "Cobble Circle"
                },
                {
                    "url": "circles/cracovia.html",
                    "display": "Cracovia Circle"
                },
                {
                    "url": "circles/strassenbarvaria.html",
                    "display": "Strassen Barvaria Circle"
                },
                {
                    "url": "circles/strassenclassic.html",
                    "display": "Strassen Classic Circle" 
                }
            ]
        }
    ]
}

编辑：

1) 2016 年 3 月 25 日 - 中部标准时间下午 6:00 问题是单击按钮时菜单不再显示。所以也许调用“$('nav#menu').mmenu();”在错误的时间。但是，当我将其移出“.done”功能时，它将加载没有任何内容的菜单导航器（除了在 html 中明确定义的内容）。我想要与第一个解决方案相同的功能，只是扩展到单个 JSON 文件中的更多数组。

2) 03/25/16 - 7:30 CST 向脚本添加了错误处理。返回结果： 1：“getJSON 请求失败！解析器错误” 2：“getJSON 请求结束！”

3) 03/25/16 - 7:49 CST 重新格式化 JSON 以正确解释。我缺少一个“{”。现在收到错误时

document.getElementById("id0"+xString).innerHTML = lis;

当前错误是： brukstone.html:81 Uncaught TypeError: Cannot set property 'innerHTML' of null

【问题讨论】：

您的解决方案有什么问题？
您可以编辑您的问题描述吗？使用 1 小段来描述您的问题到底是什么，例如，您想要实现什么，您打算处理什么样的数据以及最终结果是什么。沿途放样品
编辑：移至问题。
您的 JSON 中肯定缺少 ,，这可能是问题所在。为什么不在 Ajax 调用中添加错误处理程序？这至少会告诉您问题是否出在 JSON 上。你知道如何调试 JavaScript 代码吧？
我承认，我对 JavaScript 比较陌生。你有我可以阅读的 Ajax 调试参考吗？我一直在使用 Chrome 开发工具，但实际上只能捕获语法错误。注意：首先尝试缺少的“，”。

标签： javascript jquery arrays json

【解决方案1】：

好的。这是我向您提出的解决方案。由于您已经决定动态插入菜单数据。您不妨从一个完全空的 <nav> 元素开始，然后将所有内容动态插入其中。

这里是示例代码。它保持与您使用的完全相同的 html 结构。

Play with it on JsFiddle

html:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<nav id="menu">
  <!--
  <ul>
    <li  comment="this is a menu category">
      <a>This is the Menu Category Title</a>
      <div comment="this is the submenu container">
        <ul comment="this is a submenu list">
          <li comment="this is a submenu list item"> </li>
        </ul>
      </div>
    </li>
  </ul>
  -->
</nav>

JQuery:

var data = {
    "object": [{
        "name": "Pavers",
        "links": [{
            "display": "Brukstone",
            "url": "brukstone.html"
        }, {
            "display": "Bulovar",
            "url": "pavers/bulovar.html"
        }, {
            "display": "Cobble",
            "url": "pavers/cobble.html"
        }, {
            "display": "Cracovia",
            "url": "pavers/cracovia.html"
        }, {
            "display": "Filtrapave",
            "url": "pavers/filtrapave.html"
        }, {
            "display": "Holland",
            "url": "pavers/holland.html"
        }, {
            "display": "Old Munich",
            "url": "pavers/oldmunich.html"
        }, {
            "display": "Strassen Classic",
            "url": "pavers/strassen.html"
        }, {
            "display": "Strassen Bavaria (Tumbled)",
            "url": "pavers/strassenbavaria.html"
        }, {
            "display": "Strassen Barvaria II (Non-tumbled)",
            "url": "pavers/strassenbavariaii.html"
        }, {
            "display": "Vavel Stone (Tumbled)",
            "url": "pavers/vavel.html"
        }, {
            "display": "Vavel Stone II (Non-tumbled)",
            "url": "pavers/vavelii.html"
        }]
    }, {
        "name": "Circles",
        "links": [{
            "url": "circles/bavaria.html",
            "display": "Bavaria II Circle"
        }, {
            "url": "circles/cobble.html",
            "display": "Cobble Circle"
        }, {
            "url": "circles/cracovia.html",
            "display": "Cracovia Circle"
        }, {
            "url": "circles/strassenbarvaria.html",
            "display": "Strassen Barvaria Circle"
        }, {
            "url": "circles/strassenclassic.html",
            "display": "Strassen Classic Circle"
        }]
    }]
}


$(document).ready(function(){

    //this is the container for all the <li> that we gonna generate
    var $menuList= $("<ul>");

    //for each menu category
  for(var i=0; i < data.object.length; i++){

    //create a menu category
    var $menuCategory = $("<li>");

    //create a category title
    var $categoryTitle = $("<a>");
    $categoryTitle.text(data.object[i].name);

    //create a submenu container
    var $categorySubMenu = $("<div>");

    //create a submenu
    var $subMenuList= $("<ul>");
    for(var j=0;j<data.object[i].links.length; j++){
        console.log(data.object[i].links[j].url);
      console.log(data.object[i].links[j].display);

        var $submenuItem = $("<li>");
      var $submenuLink = $("<a>");
      $submenuLink.attr("href", data.object[i].links[j].url);
      $submenuLink.text(data.object[i].links[j].display);
      $submenuItem.append($submenuLink);
      $subMenuList.append($submenuItem);
    }

    $categorySubMenu.append($subMenuList);
    $menuCategory.append($categoryTitle);
    $menuCategory.append($categorySubMenu);
    $menuList.append($menuCategory);
  }

  //when the menu is fully assembled, append it into nav
  $('#menu').append($menuList);

});

【讨论】：

【解决方案2】：

解决方案现在有效。最初在 JSON 文件中缺少括号和逗号。编辑有问题的代码以反映可能需要嵌套数组 JSON 解决方案的任何人的工作解决方案。

【讨论】：