Question

今天我正试图戴上我的前端帽子，解决一个小问题。我编写了一个映射目录树的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"元素。怎么做？

Answer 1

您可以使用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>

Answer 2

对于jqTree，您需要确保数据作为数组传入。请参阅代码段，了解其工作原理。

string strConnExcel = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + excelFilePath + ";Extended Properties='Excel 8.0;HDR=YES;IMEX=1';";

$.getJSON('https://api.myjson.com/bins/1a2g9x/', function(result) {
  //console.log(result[0]);
  $('#tree1').tree({
    data: [result[0]],
    autoOpen: true,
    dragAndDrop: true
  });
});

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

2 个答案: