Jquery 下面的代码是使用json显示菜单。但它不起作用
这段代码从json中获取值，然后输出一个菜单栏，但我面临一些问题。 我想显示菜单栏，包括它的子菜单，它是动态的，而不是静态的。 所有值必须是json格式，UI中的输出必须是json字符串格式的数组Jquery 下面的代码是使用json显示菜单。但它不起作用,jquery,json,Jquery,Json,这段代码从json中获取值，然后输出一个菜单栏，但我面临一些问题。 我想显示菜单栏，包括它的子菜单，它是动态的，而不是静态的。 所有值必须是json格式，UI中的输出必须是json字符串格式的数组 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-eq
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="json/jsondata.json"></script> -->
<script>
var data = "[{'text': 'Chocolate Beverage','id': '1','parentid': '-1'}, {'id': '2','parentid': '1','text': 'Hot Chocolate'}, {'id': '3','parentid': '1','text': 'Peppermint Hot Chocolate'}, {'id': '4','parentid': '1','text': 'Salted Caramel Hot Chocolate'}, {'id': '5','parentid': '1','text': 'White Hot Chocolate'}]";
var builddata = function () {
var source = [];
var items = [];
// build hierarchical source.
for (i = 0; i < data.length; i++) {
var item = data[i];
var label = item["text"];
var parentid = item["parentid"];
var id = item["id"];
if (items[parentid]) {
var item = { parentid: parentid, label: label, item: item };
if (!items[parentid].items) {
items[parentid].items = [];
}
items[parentid].items[items[parentid].items.length] = item;
items[id] = item;
}
else {
items[id] = { parentid: parentid, label: label, item: item };
source[id] = items[id];
}
}
return source;
}
var source = builddata();
var buildUL = function (parent, items) {
$.each(items, function () {
if (this.label) {
// create LI element and append it to the parent element.
var li = $("<li>" + this.label + "</li>");
li.appendTo(parent);
// if there are sub items, call the buildUL function.
if (this.items && this.items.length > 0) {
var ul = $("<ul></ul>");
ul.appendTo(li);
buildUL(ul, this.items);
}
}
});
}
var ul = $("<ul></ul>");
ul.appendTo("#jqxMenu");
buildUL(ul, source);
$("#jqxMenu").jqxMenu({ width: '600', height: '30px'});
alert(8);
</script>
</head>
<body>
<!-- $("#jqxMenu").jqxMenu({ width: '600', height: '30px'}); -->
<div id='jqxMenu'></div>
</body>
</html>
您从未将JSON文本解析为对象。在你拥有它的状态下，它只是一个原始字符串。用于将该JSON字符串解析为对象。请尝试以下方法
var data = "[{'text': 'Chocolate Beverage','id': '1','parentid': '-1'}, {'id': '2','parentid': '1','text': 'Hot Chocolate'}, {'id': '3','parentid': '1','text': 'Peppermint Hot Chocolate'}, {'id': '4','parentid': '1','text': 'Salted Caramel Hot Chocolate'}, {'id': '5','parentid': '1','text': 'White Hot Chocolate'}]";
data = JSON.parse(data );