How to display content from an arbitrarily nested JSON using jQuery?

Question

Today I'm trying to put my front-end hat, and solve a little problem. I wrote an API that maps a directory tree and give me a JSON with the following structure:

{
    "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"
    }
}

This is a sample, but there may be infinite(large) nested directories.

This is how I think is done(sorry if it's stupid, I'm extremely new to 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>

Is the request done in the right way? The API don't ask for data in the GET request.

I want to create a list of elements, with elements with id = "folder" for directories and id = "file" for files. How is it done?

search for a jquery tree plugin. something like this: jstree.com/api — orberkov
– orberkov, Commented May 26, 2017 at 18:40
Also, you might want to rename your 'result' inside the each callback to something else as the getJSON callback also has 'result' param — vabii
– vabii, Commented May 26, 2017 at 18:41
@Woodrow Can you make a functional answer with jqtree and the data I provided? It seems very promising, but I can't seem to make it work :/ — Mikael
– Mikael, Commented May 26, 2017 at 19:47

Woodrow · Accepted Answer · 2017-05-26 20:18:20Z

1

For jqTree you need to make sure the data is passed in as an array. Please see the snippet for an example of it working.

$.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>

answered May 26, 2017 at 20:18

Woodrow

2,8221 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2017-05-26 20:23:17Z

You can use Object.values() to iterate values of object, for..of loop, recursion

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>

Collectives™ on Stack Overflow

How to display content from an arbitrarily nested JSON using jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related