将 JSON 文件数据填充到数组中,然后将数组输入到 mmenu 插件中
Populate JSON file data into Array then feed Array into mmenu plugin
我正在尝试将 JSON 文件(menu.json)读取到数组(myList),以便 运行 将填充我的 [=91] 的函数(PopulateRecords) =] 带有 HTML 行的菜单插件。理想情况下,我只需稍后更新 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 内的 <script>
标记中调用)应该传递 [=88 的 ID 号=] 元素是导航菜单 HTML 中的占位符 (id01)。它还传递了一个从 menu.json 文件(也称为 HTML 内的 <script>
标记)填充的数组。然后它注入 html 遵循 jQuery mmenu 要求的正确格式(列表项和 href)。
注意: 我已经成功地使用声明的 javascript 数组测试了 PopulateRecords 函数。因此,只要为 'url' 和 'display'.
传递一个值,该函数就可以正常工作
自然,因为我不熟悉这个概念,这让我相信问题出在我无法解析JSON文件。在解决这个问题后,我转向堆栈溢出社区寻求帮助。
编辑:正在进行的调试说明:
1) 下面是更新后的 JSON 调用。通过将 PopulateRecords 调用移至“.done”,结果会停止 'myList not defined error',但仍不会填充 table(下面的 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' 的调用以进行调试。调用页面时日志returns什么都没有。
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(){ ... });
这看起来像:
$(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 文件(menu.json)读取到数组(myList),以便 运行 将填充我的 [=91] 的函数(PopulateRecords) =] 带有 HTML 行的菜单插件。理想情况下,我只需稍后更新 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 内的 <script>
标记中调用)应该传递 [=88 的 ID 号=] 元素是导航菜单 HTML 中的占位符 (id01)。它还传递了一个从 menu.json 文件(也称为 HTML 内的 <script>
标记)填充的数组。然后它注入 html 遵循 jQuery mmenu 要求的正确格式(列表项和 href)。
注意: 我已经成功地使用声明的 javascript 数组测试了 PopulateRecords 函数。因此,只要为 'url' 和 'display'.
传递一个值,该函数就可以正常工作自然,因为我不熟悉这个概念,这让我相信问题出在我无法解析JSON文件。在解决这个问题后,我转向堆栈溢出社区寻求帮助。
编辑:正在进行的调试说明:
1) 下面是更新后的 JSON 调用。通过将 PopulateRecords 调用移至“.done”,结果会停止 'myList not defined error',但仍不会填充 table(下面的 img1)。
var myList;
$.getJSON('menu.json')
.done(function (data) {
myList = data;
PopulateRecords("01",myList);
console.log(myList.pavers);
console.log(myList);
console.log(data);
});
2) 我还添加了几个 console.log 对 '.done' 的调用以进行调试。调用页面时日志returns什么都没有。
3) 调用页面后,在页面的控制台行中使用相同的调用,结果如下 (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(){ ... });
这看起来像:
$(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": "#"
}
]
}