將JSON文件數據填充到Array中，然后將Array提供到mmenu插件中

Question

我正在嘗試將JSON文件（menu.json）讀取到數組（myList），以便運行一個函數（PopulateRecords），該函數將使用HTML行填充我的jQuery菜單插件。 理想情況下，我只需稍后更新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"}
]}

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

調用的PopulateRecords函數位於html頭中附加的單獨的functions.js文件中。

該函數的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;
}

它應該如何工作： PopulateRecords函數（在HTML中的<script>標記中調用）應該傳遞div元素的id號，該元素是導航菜單HTML中的占位符（id01）。 它還傳遞一個數組，該數組從menu.json文件填充（在HTML中的<script>標記中也稱為）。 然后它會按照jQuery mmenu所需的正確格式（列出項目和href）注入html。

注意：我已經成功地使用聲明的javascript數組測試了PopulateRecords函數。 因此，只要傳遞'url'和'display'的值，該函數就可以正常工作。

當然，由於我不熟悉這個概念，這讓我相信問題在於我無法解析JSON文件。 在關注這個問題之后，我轉向堆棧溢出社區尋求幫助。

編輯：正在進行的調試說明 ：

1）下面是更新的JSON調用。 通過將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

2）我還添加了幾個console.log調用'.done'進行調試。 調用頁面時，日志不返回任何內容。

3）調用頁面后，在頁面的控制台行中使用相同的調用，結果如下（ img2如下）。 IMG2

Answer 1

在調用函數之前，您可能需要等待DOM加載。 試着做

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

內

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

看起來像這樣：

$(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);
    });
})

僅供參考我這是我嘗試過的 ：

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：

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