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

我想你的问题早就解决了。

因为你的 'answer' 没有解决 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 验证器进行了测试。

将 Json 作为变量加载到 jsTree 中

Loading Json as variable into jsTree

javascript

jquery

json

jstree