问题
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
回答1:
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": "#"
}
]
}
来源：https://stackoverflow.com/questions/36160564/populate-json-file-data-into-array-then-feed-array-into-mmenu-plugin