今天，我尝试戴上我的前端帽子，解决一个小问题。我写了一个映射目录树的 API，并给我一个具有以下结构的 JSON:
{
"0": {
"children": [
{
"name": "still.txt",
"path": "/home/myname/docs/still.txt",
"type": "file"
},
{
"name": "now.txt",
"path": "/home/myname/docs/now.txt",
"type": "file"
},
{
"children": [
{
"name": "names.txt",
"path": "/home/myname/docs/other-docs/names.txt",
"type": "file"
},
{
"name": "places.txt",
"path": "/home/myname/docs/other-docs/places.txt",
"type": "file"
}
],
"name": "other-docs",
"path": "/home/myname/docs/other-docs",
"type": "directory"
},
{
"name": "address.txt",
"path": "/home/myname/docs/address.txt",
"type": "file"
}
],
"name": "",
"path": "/home/myname/docs",
"type": "directory"
}
}
这是一个示例，但可能有无限(大)嵌套目录。
这就是我认为的完成方式(抱歉，如果它很愚蠢，我对 jQuery 非常陌生):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#get_button").click(function(){
$.getJSON('http://192.168.200.77/api/', function(result){
$(result).each(function(i, result){
// Here something happens
$(content).appendTo("#files");
});
});
});
</script>
</head>
<body>
<h1>
Test Client
</h1>
<button id="get_button" type="button"> Get Tree </button>
<div id = "files"></div>
</body>
</html>
请求是否以正确的方式完成？ API 不会在 GET 请求中请求数据。
我想创建一个元素列表，其中包含用于目录的 id = "folder" 元素和用于文件的 id = "file" 元素。它是怎么做到的？
最佳答案
对于 jqTree，您需要确保数据作为数组传入。请查看代码片段以了解它的工作示例。
$.getJSON('https://api.myjson.com/bins/1a2g9x/', function(result) {
//console.log(result[0]);
$('#tree1').tree({
data: [result[0]],
autoOpen: true,
dragAndDrop: true
});
});<link href="https://mbraak.github.io/jqTree/jqtree.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mbraak.github.io/jqTree/tree.jquery.js"></script>
<div id="tree1"></div>关于javascript - 如何使用 jQuery 显示任意嵌套的 JSON 中的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44208155/