将JSON文件数据填充到数组中，然后将数组提供给mmenu插件 [英] Populate JSON file data into Array then feed Array into mmenu plugin
问题描述
我试图读取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慕尼黑，url：pavers / oldmunich.html}，
{display：Strassen Classic，url：pavers / strassen.html}，
{display ：Strassen Bavaria（翻滚），url：pavers / strassenbavaria.html}，
{display：Strassen Barvaria II（Non-tumbled），url strassenbavariaii.html}，
{display：Vavel Stone（Tumbled），url：pavers / vavel.ht ml}，
{display：Vavel Stone II（Non-tumbled），url：pavers / vavelii.html}
]}
我的HTML
<！DOCTYPE html>
< html>
< head>
<！ - - >
<！ - 来源 - >
<！ - - >
< link type =text / css =stylesheethref =css / demo.css/>
< link type =text / css =stylesheethref =../ dist / css / jquery.mmenu.all.css/>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js><<< ; /脚本>
< script type =text / javascriptsrc =../ 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 >
<！ - - >
<！ - 附加包含PopulateRecords的函数.js - >
<！ - - >
< script type =text / javascriptsrc =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>摊铺机< / a>
< div id =id01>< / div>
< / li>
< / ul>
< / nav>
< script type =text / javascript>
//调用JSON数据
var myList;
$ .getJSON（'menu.json'）
.done（function（data）{
myList = data;
}）;
//从列表中选择项目
PopulateRecords（01，myList）;
< / script>
< / body>
< / html>
所调用的PopulateRecords函数位于html头文件中的一个单独的functions.js文件中。
该函数的javascript是：
函数PopulateRecords（id，arr）{
var out =< ul>;
var i;
for（i = 0; i
img1
2）我也为调试添加了多个console.log调用。
3）在页面被调用后，在控制台行中使用相同的调用页面，其结果如下（ img2 以下）。
img2解决方案在调用你的函数之前，你可能需要等待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（）{...}）;
看起来像这样：
<$ p $（$）$ $ $ $（$）$（$）$（$）$数据）{
myList = data;
PopulateRecords（01，myList）;
$（'nav＃menu'）。mmenu（）;
console.log（myList .pavers）;
console.log（myList）;
console.log（data）;
}）;
}）
$ b仅供参考：
html：
< head>
< script type =text / javascriptsrc =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><< ;
$（'）+'data.options [i] .name +< / a>< / li>; a href ='+ data.options [i] .url +'> #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：＃
}
]
}
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. This ideally would allow me to dynamically change my menu options by only having to update the JSON file later.
My JSON file is 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
<!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.
The javascript for the function is:
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. It is also passed an array which is populated from the menu.json file (also called in<script>tag within HTML). It then injects html that follows the proper format that jQuery mmenu requires (list items and href).Note: I have tested the PopulateRecords function with a declared javascript array successfully. So, the function works fine as long as it is passed a value for 'url' and '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. 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. 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).
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) I have also added several console.log calls to the '.done' for debugging. 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). img2
解决方案It's possible that you need to wait for the DOM to load before calling your function. 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:
<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文件数据填充到数组中，然后将数组提供给mmenu插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
