Populate JSON File Data Into Array Then Feed Array Into Mmenu Plugin
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
Solution 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": "#"
}
]
}
Post a Comment for "Populate JSON File Data Into Array Then Feed Array Into Mmenu Plugin"