Question

此代码从json获取值，然后输出菜单栏但我遇到问题。我想显示菜单栏包括其子菜单，它是动态的而不是静态的。所有值必须在json中，UI中的输出必须包含在json string

中的数组中

<!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>

Answer 1

您从未将JSON文本解析为对象。在你拥有它的状态下，它只是一个原始字符串。使用jQuery.parseJson将JSON字符串解析为对象。

Answer 2

尝试这样的事情

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 );

你需要将字符串解析为json。

JSON.parse（）方法将字符串解析为JSON，可选地转换解析产生的值。

参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

下面的代码是使用json显示菜单。但它不起作用

2 个答案: