将 Json 作为变量加载到 jsTree 中答案

【问题标题】：Loading Json as variable into jsTree将 Json 作为变量加载到 jsTree 中
【发布时间】：2015-04-07 18:19:24
【问题描述】：

我正在使用带有 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

【问题讨论】：

标签： javascript jquery json jstree

【解决方案1】：

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

最好的问候，伊万

【讨论】：

嗨，Ivan，我刚刚解决了这个问题，我只是更密切地关注 api。我发表了一条评论说我在不久之后修复了它，但我不确定如何将其设置为问题已解决，我对 stackoverflow 相当陌生。无论如何，谢谢你的回复。我喜欢 JsTree，这是一个了不起的项目。感谢您创建它！你就是男人！
谢谢！我刚刚回答了所有与 jsTree 相关的问题，并认为我会插话。

【解决方案2】：

$.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 验证器进行了测试。

【讨论】：

【解决方案3】：

我知道你已经回答了你自己的问题，但我还是想告诉你可能是什么原因。

查看您提供给我们的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);

【讨论】：