将 JSON 文件数据填充到 Array 中,然后将 Array 输入到 mmenu 插件中

Posted

技术标签:

【中文标题】将 JSON 文件数据填充到 Array 中,然后将 Array 输入到 mmenu 插件中【英文标题】:Populate JSON file data into Array then feed Array into mmenu plugin 【发布时间】:2016-07-09 16:54:44 【问题描述】:

我正在尝试将 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 函数位于单独的 functions.js 文件中,该文件附加在 html 头中。

函数的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 中的 &lt;script&gt; 标记中调用)应该传递 div 元素的 id 号,该 div 元素是导航菜单 HTML 中的占位符 (id01) .它还传递了一个从 menu.json 文件填充的数组(在 HTML 中也称为 &lt;script&gt; 标记)。然后它会注入遵循 jQuery mmenu 所需的正确格式的 html(列表项和 href)。

注意:我已经成功地使用声明的 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) 我还向“.done”添加了几个 console.log 调用以进行调试。调用页面时,日志不返回任何内容。

3)调用页面后,在控制台行中对页面使用相同的调用,结果如下(img2)。 img2

【问题讨论】:

能不能把PopulateRecords("01",myList);改成PopulateRecords("01",myList.pavers);这么简单? 这会返回一个错误:“Uncaught TypeError: Cannot read property 'pavers' of undefined(anonymous function)”。 尝试将PopulateRecords("01",myList); 放入done 回调中。 错误消失了,但是菜单项没有被填充。我也用 mylist.pavers 尝试了建议的解决方案。仍然没有错误,但没有填充菜单项。 您应该输出myList.pavers 并将其结构与函数使用的数组进行比较。这应该可以帮助您查明问题。 【参考方案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": "#"
        
    ]

【讨论】:

这肯定是朝着正确的方向前进。它按原样工作,但这不一定与 mmenu jQuery 插件或 PopulateRecords 函数交互。下课后,我会摆弄解决方案,尝试添加这些功能,看看它是否能继续工作。 @BillSmith 我编辑在填充后将$('nav#menu').mmenu(); 包含在 .done 中。假设您正确使用插件,它现在应该可以工作了:)

以上是关于将 JSON 文件数据填充到 Array 中,然后将 Array 输入到 mmenu 插件中的主要内容,如果未能解决你的问题,请参考以下文章

使用 JSON 数据填充表单

$.getJSON 执行问题:json 到数组已填充但未使用

数据从全局数组中消失

我如何解析 JSON,将其排序为数组。提取数据并填充到表格视图中?

解析JSON并填充到React JS中的表中

结构化/嵌套 json 数据以填充树形网格