将Json作为变量加载到jsTree中

Question

我在Json中使用jstree。 我的问题是我可以直接将Json提供到jsTree数据中，但是当我将其作为变量传递时，它将打印整个Json字符串作为一个节点的标题。

下面是nodes.json

 { "id": "ajson1", "parent": "#", "text": "Simple root node" }, { "id": "ajson2", "parent": "#", "text": "Root node 2" }, { "id": "ajson3", "parent": "ajson2", "text": "Child 1" }, { "id": "ajson4", "parent": "ajson2", "text": "Child 2" }, 

下面的代码有效

 request = $.getJSON("nodes.json"); var data; request.complete(function() { data = request.responseText; console.log(data); $.jstree.defaults.core.themes.responsive = true; $('#tree').jstree({ plugins: ["checkbox", "sort", "types", "wholerow", "search"], "types": { "file": { "icon": "jstree-file" } }, 'core': { 'data': [{ "id": "ajson1", "parent": "#", "text": "Simple root node" }, { "id": "ajson2", "parent": "#", "text": "Root node 2" }, { "id": "ajson3", "parent": "ajson2", "text": "Child 1" }, { "id": "ajson4", "parent": "ajson2", "text": "Child 2" }, ] } }); }); 

但这在下面不起作用

  request = $.getJSON("nodes.json"); var data; request.complete(function() { data = request.responseText; console.log(data); $.jstree.defaults.core.themes.responsive = true; $('#tree').jstree({ plugins: ["checkbox", "sort", "types", "wholerow", "search"], "types": { "file": { "icon": "jstree-file" } }, 'core': { 'data': [data] } }); }); 

另外，如果您希望看到执行的代码，我会将其托管在我的域中。 http://www.jordanmclemore.com/projects/jstree/test/visual/current.html

Answer 1

在原始问题中， data是一个字符串（因为您使用的是.responseText ），要使其用作变量，应使用JSON.parse将字符串转换为对象数组。

最好的问候，伊万

Answer 2

我知道您已经回答了自己的问题，但是无论如何我想告诉您可能是什么原因。

在查看您提供给我们的nodes.json时，我不得不说它没有正确格式化为JSON。 显然，它是一个数组，但没有这样格式化。 因此，您有多个根元素，这是无效的JSON。

如果要将nodes.json更改为此：

 [{ "id": "ajson1", "parent": "#", "text": "Simple root node" }, { "id": "ajson2", "parent": "#", "text": "Root node 2" }, { "id": "ajson3", "parent": "ajson2", "text": "Child 1" }, { "id": "ajson4", "parent": "ajson2", "text": "Child 2" }] 

在您的JavaScript中：

  request = $.getJSON("nodes.json"); var data; request.complete(function() { data = request.responseText; console.log(data); $.jstree.defaults.core.themes.responsive = true; $('#tree').jstree({ plugins: ["checkbox", "sort", "types", "wholerow", "search"], "types": { "file": { "icon": "jstree-file" } }, 'core': { 'data': data } }); }); 

我认为您的问题已经解决。

由于您的“答案”不能修复JSON，因此我会说这是错误的答案，我建议您尝试上面建议的方法。

---

顺便说一下，将来有一个方便的工具来验证您的JSON： http : //jsonformatter.curiousconcept.com/

请注意，您可能必须也可以不必使用$.parseJSON(data);

Answer 3

$.jstree.defaults.core.themes.responsive = true;
$('#tree').jstree({
    plugins: ["checkbox", "types"],
    "types": {
        "file": {
            "icon": "jstree-file"
        }
    },
    'core': {
        'data': {
            'url': function(node) {
                return 'nodes.json'
            },
            'data': function(node) {
                return {
                    'id': node.id
                };
            }
        }
    }
});

我只是更加密切地遵循了Ivan的JSTree API。 他的API很棒，密切关注它会为您省去很多麻烦。 另外，我相信自己的json有一个预告逗号，并且它是无效的，所以我也必须修复它。 我使用JSON验证程序进行了测试。