gpt4 book ai didi

javascript - 如何使用 jQuery 显示任意嵌套的 JSON 中的内容?

转载 作者:行者123 更新时间:2023-11-30 15:17:57 25 4
gpt4 key购买 nike

今天,我尝试戴上我的前端帽子,解决一个小问题。我写了一个映射目录树的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com