将JSON文件数据填充到Array中，然后将Array提供到mmenu插件中

Question

I am trying to read a JSON file(menu.json) to an array(myList) in order to run a function(PopulateRecords) that will populate my jQuery menu plugin with lines of HTML. 我正在尝试将JSON文件（menu.json）读取到数组（myList），以便运行一个函数（PopulateRecords），该函数将使用HTML行填充我的jQuery菜单插件。 This ideally would allow me to dynamically change my menu options by only having to update the JSON file later. 理想情况下，我只需稍后更新JSON文件即可动态更改菜单选项。

My JSON file is menu.json: 我的JSON文件是menu.json：

{"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"}
]}

My HTML is 我的HTML是

<!DOCTYPE html>
<html>
    <head>
                <!--         -->
                <!-- Sources -->
                <!--         -->
        <link type="text/css" rel="stylesheet" href="css/demo.css" />
        <link type="text/css" rel="stylesheet" href="../dist/css/jquery.mmenu.all.css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="../dist/js/jquery.mmenu.all.min.js"></script>

        <script src="https://cdn.vaadin.com/vaadin-core-elements/latest/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel="import"
            href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/vaadin-combo-box.html">

           <!--                                                  -->
           <!-- Attach function.js which contains PopulateRecords-->
           <!--                                                  -->
        <script type="text/javascript" src="functions.js"></script>

           <!--SETUP for jQuery mmenu plugin-->
        <script type="text/javascript">
            $(function() {
                $('nav#menu').mmenu();
            });
        </script>
    </head>

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


        <script type="text/javascript">
            // CALL JSON DATA
            var myList;
            $.getJSON('menu.json')
                .done(function (data) {
                myList = data;
            });

            // POPULATE MENU ITEMS FROM ARRAY
            PopulateRecords("01",myList);
        </script>
    </body>
</html>

The PopulateRecords function that is called is in a separate functions.js file that was attached in the html head. 调用的PopulateRecords函数位于html头中附加的单独的functions.js文件中。

The javascript for the function is: 该函数的javascript是：

function PopulateRecords(id, arr) {
    var out = "<ul>";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<li><a href="' + arr[i].url + '">' + arr[i].display + '</a></li>';
    }
    out += "</ul>";
    document.getElementById("id"+id).innerHTML = out;
}

How it should work: The PopulateRecords function(called in <script> tag within HTML) should be passed the id number for the div element that is a placeholder(id01) within the nav menu HTML. 它应该如何工作： PopulateRecords函数（在HTML中的<script>标记中调用）应该传递div元素的id号，该元素是导航菜单HTML中的占位符（id01）。 It is also passed an array which is populated from the menu.json file (also called in <script> tag within HTML). 它还传递一个数组，该数组从menu.json文件填充（在HTML中的<script>标记中也称为）。 It then injects html that follows the proper format that jQuery mmenu requires (list items and href). 然后它会按照jQuery mmenu所需的正确格式（列出项目和href）注入html。

Note: I have tested the PopulateRecords function with a declared javascript array successfully. 注意：我已经成功地使用声明的javascript数组测试了PopulateRecords函数。 So, the function works fine as long as it is passed a value for 'url' and 'display'. 因此，只要传递'url'和'display'的值，该函数就可以正常工作。

Naturally , as I'm unfamiliar with the concept, this leads me to believe the problem lies in my inability to parse the JSON file. 当然，由于我不熟悉这个概念，这让我相信问题在于我无法解析JSON文件。 After slamming my head into this problem, I'm turning to the stack overflow community for assistance. 在关注这个问题之后，我转向堆栈溢出社区寻求帮助。

EDIT: Ongoing-Debugging Notes : 编辑：正在进行的调试说明 ：

1) Below is the updated JSON call. 1）下面是更新的JSON调用。 By moving the PopulateRecords call into the '.done' the result stops the 'myList not defined error', but still does not populate the table ( img1 below). 通过将PopulateRecords调用移动到'.done'，结果将停止'myList not defined error'，但仍然不会填充表（ img1如下）。

var myList;
        $.getJSON('menu.json')
        .done(function (data) {
        myList = data;
        PopulateRecords("01",myList);
        console.log(myList.pavers);
        console.log(myList);
        console.log(data);
        });

img1 IMG1

2) I have also added several console.log calls to the '.done' for debugging. 2）我还添加了几个console.log调用'.done'进行调试。 The log returns nothing when the page is called. 调用页面时，日志不返回任何内容。

3) After the page is called, used the same calls in the console line for the page with the following results ( img2 below). 3）调用页面后，在页面的控制台行中使用相同的调用，结果如下（ img2如下）。 img2 IMG2

Answer 1

It's possible that you need to wait for the DOM to load before calling your function. 在调用函数之前，您可能需要等待DOM加载。 Try doing 试着做

var myList;
$.getJSON('menu.json')
    .done(function (data) {
        myList = data;
        PopulateRecords("01",myList);
        console.log(myList.pavers);
        console.log(myList);
        console.log(data);
    });

inside 内

$(document).ready(function(){ ... });

which would look something like: 看起来像这样：

$(document).ready(function(){
    var myList;
    $.getJSON('menu.json')
        .done(function (data) {
            myList = data;
            PopulateRecords("01",myList);
            $('nav#menu').mmenu();
            console.log(myList.pavers);
            console.log(myList);
            console.log(data);
    });
})

FYI this is what I tried : 仅供参考我这是我尝试过的 ：

html: HTML：

<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div>
<label id="menuTitle"></label>
<ul id="menu">

</ul>
</div>
<script>
$(document).ready(function(){
    $.getJSON('menu.json').done(function(data){
            $('#menuTitle').html(data.name);
            var lis = ''
            for(var i = 0; i < data.options.length; i++)
                lis += '<li><a href="'+ data.options[i].url+'">' + data.options[i].name + "</a></li>";
            $('#menu').html(lis);
        });
});
</script>
</body>

JSON: JSON：

{ 
    "name": "aMenu",
    "options": [
        {
            "name": "option 1", 
            "url": "#"
        },
        {
            "name": "option 2", 
            "url": "#"
        },
        {
            "name": "option 3", 
            "url": "#"
        },
        {
            "name": "option 4", 
            "url": "#"
        }
    ]
}

将JSON文件数据填充到Array中，然后将Array提供到mmenu插件中

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-22 19:50:25

将JSON文件数据填充到Array中，然后将Array提供到mmenu插件中

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-22 19:50:25

解决方案1
1 已采纳 2016-03-22 19:50:25