花式树不加载 json 数据答案

【问题标题】：fancytree not loading json data花式树不加载 json 数据
【发布时间】：2018-02-06 21:44:37
【问题描述】：

我正在尝试使用 fancytree 来显示一些从 php rest 服务返回的数据。服务返回的数据已通过 JSONLint 验证，并以 fancytree 文档中显示的格式显示。

如果我打开了开发人员工具窗口 (Chrome)，它会在文件 jquery-1.11.3.min.js:2 中显示错误“未捕获的错误：未实现”。

当我验证返回的 JSON 数据时，我使用的是 Advanced Rest Client (Google App)，我删除了 Advanced Rest Client 显示的字符串周围的双引号，然后将值粘贴到 JSONLint。

我的 jquery 代码：

<script type="text/javascript">
    $(function(){
         var phpAPI = "http://localhost/clubjudge/api/JSONClassTree2";
         $.getJSON(phpAPI)
          .done(function(json) {
              alert(json);
              $("#tree").fancytree({
                 source: json
                 }
              );
           })
          .fail(function(jqxhr, textStatus, error) {
              var err = textStatus + ", "+ error;
              console.log("Request Failed: "+ err );
   });

});
</script>

非常感谢任何帮助，因为我已经搞砸了几天了。 PS。我希望包含的代码格式正确。 “预览”看起来不太对。

想我最好发布 JSON 数据。

[
 {"title":"A - Australian Native","key":"1","children":[
     {"title":"A1 - Australian Native Dendrobium Species","key":"7"},
     {"title":"A2 - Australian Native Any Other Species","key":"8"},
     {"title":"A3 - Australian Native Dendrobium Hybrid","key":"9"},
     {"title":"A4 - Australian Native Any Other Hybrid","key":"10"},
     {"title":"A5 - Australian Native Seedling","key":"11"}
 ]},
 {"title":"B - Cymbidium","key":"2","children":[
     {"title":"B1 - Standard Type Cymbidium","key":"3"},
     {"title":"B2 - Intermediate Type Cymbidium","key":"4"},
     {"title":"B3 - Miniature Type Cymbidium","key":"5"},
     {"title":"B4 - Cymbidium Species","key":"6"}
 ]}
]

对不起，我知道有很多。这又是 Advanced Rest Client 显示的内容（在剪掉外部双引号之后）。

【问题讨论】：

标签： php jquery json loading fancytree

【解决方案1】：

您可以将请求中的 JSON 数据加载到源：

$("#tree").fancytree({
  source: $.ajax({
    url: "/clubjudge/api/JSONClassTree2",
    dataType: "json"
  })
});

【讨论】：

【解决方案2】：

可能你的 json 变量是 JSON 字符串，而 FancyTree 期望它是 JS 对象，所以你应该首先使用 JSON.parse()。这对我有帮助。

【讨论】：

【解决方案3】：

不确定这是否能解决您的问题，但您不需要发出单独的 ajax 请求。 Fancytree 直接支持这一点：

$("#tree").fancytree({
  source: {
    url: "/clubjudge/api/JSONClassTree2",
    cache: false
  },
  ...
});

详情请看这里：https://github.com/mar10/fancytree/wiki/TutorialLoadData

【讨论】：