Question

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

以下是简单数组解决方案：

HTML w / Script：

<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 w / Script：

<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年4月25日 - 下午6:00 CST 问题是单击按钮时不再显示菜单。所以也许打电话给＆＃34; $（＆＃39; nav＃menu＆＃39;）。mmenu（）;＆＃34;在错误的时间。然而，当我把它从“.done”中移出来的时候。函数它将加载菜单导航器而没有任何内容（除了在html中明确定义的内容）。我希望使用与第一个解决方案相同的功能，只需扩展到在单个JSON文件中访问更多数组。

2）03/25/16 - 7:30 CST 为脚本添加了错误处理。结果返回： 1：＆＃34; getJSON请求失败！ parsererror＆＃34; 2：＆＃34; getJSON请求已结束！＆＃34;

3）03/25/16 - 7:49 CST 重新格式化JSON以便正确解释..我错过了一个＆＃39; {＆＃39;。现在收到错误

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

当前错误是： brukstone.html：81 Uncaught TypeError：无法设置属性＆inner;内部HTML＆＃39;为null

Answer 1

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

Answer 2

确定。这是我向你提出的解决方案。因为您已经决定动态插入菜单数据。你也可以从一个完全空的<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);

});

复杂的JSON嵌套和通过循环访问

2 个答案: