如何使用 jQuery 从任意嵌套的 JSON 中显示内容？
Posted
技术标签:
【中文标题】如何使用 jQuery 从任意嵌套的 JSON 中显示内容？【英文标题】：How to display content from an arbitrarily nested JSON using jQuery? 【发布时间】：2017-10-27 17:39:58 【问题描述】：今天我试着戴上前端的帽子，解决一个小问题。我编写了一个映射目录树的 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" 用于文件。是怎么做到的？
【问题讨论】：
搜索 jquery 树插件。像这样的东西：jstree.com/api 另外，您可能希望将每个回调中的“结果”重命名为其他名称，因为 getJSON 回调也有“结果”参数 mbraak.github.io/jqTree 可能会有帮助 @Woodrow 你能用 jqtree 和我提供的数据给出一个实用的答案吗？这似乎很有希望，但我似乎无法让它发挥作用：/ @Mikael 请看下面的答案 【参考方案1】：对于 jqTree，您需要确保数据作为数组传入。请参阅 sn-p 以了解它的工作示例。
$.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>【讨论】：
【参考方案2】：您可以使用Object.values() 来迭代对象的值、for..of 循环、递归
const data =
"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"
console.log(Object.values(data));
const [files, folders] = [
document.getElementById("file")
, document.getElementById("folder")
];
const processNode = node =>
const children, name, path, type = node;
(type === "file" ? files : folders).innerHTML += `name:$name, path:$path, type:$type<br>`;
if (children)
for (let child of children)
processNode(child);
const fn = o =>
for (let node of Object.values(data)) processNode(node);
fn(data);<div id="file"><b>files:</b><br></div><br>
<div id="folder"><b>folders:</b><br></div>【讨论】：
以上是关于如何使用 jQuery 从任意嵌套的 JSON 中显示内容？的主要内容，如果未能解决你的问题，请参考以下文章
如何从在线 JSON API 中提取嵌套数据对象？ [关闭]
如何使用 jQuery 将 JSON 树呈现为使用 div 的嵌套 HTML？
使用谷歌图表对 JSON API 进行 jQuery 嵌套查询
Javascript - 使用 jQuery 将 JSON 嵌套到数组中