如何使用 jQuery 从任意嵌套的 JSON 中显示内容？答案

【问题标题】：How to display content from an arbitrarily nested JSON using jQuery?如何使用 jQuery 从任意嵌套的 JSON 中显示内容？
【发布时间】：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 请看下面的答案

标签： javascript jquery html json dom

【解决方案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>

【讨论】：