I am looking to create a JSON OR HTML file that will accurately give the folder/file structure for a directory for use with jsTree 3.0 (www.jstree.com). I want to make it AJAX/lazy load so that each file folder is loaded when the user requests it. Each link in the jsTree will be used to fire a function. There are a few good pages on Google that mentioned NodeJS, NPM, Grunt, angularJS, expressJS... the list goes on ... but its a bit over my head as a beginner.

I had looked at using HTML data to make the tree structure, but I again don't know how to do this 'dynamically', or work with the server side. I'd like to check the directory structure at page load after the document is ready, then have the tree read the JSON file. It could be JSON or HTML in my mind; as long as I can have onclick functions for each individual link.

How do I do this? Is there a better way to do this? It seems like it should be pretty common territory... just not for a beginner I guess.

closed as too broad by GlenH7, Ixrec, user40980, Robert Harvey, durron597 Mar 27 '15 at 12:44

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    More information on why you want to do it and where you want to run this code may be useful for recommending possible solutions. Is this for something akin to a "download" section on a website? If yes, do you know what you server has installed/what you can install on it? – Fernando Cordeiro Mar 20 '15 at 1:12

HTML as well as JSON are not "programming languages". HTML is a Markup Language, and JSON is more of a "Data structure".

They are "standard ways" to organize information. They're not the tool to organize it.

Since you are considering JSON and HTML, JavaScript seems like a pretty good approach (Albeit you could use PHP or Ruby or whatever).

For starters, you need to be able to travel to inner folders. Possible approaches include recursion and functions that call each other.

Follows a Gist that does exactly that (Goes "inside" every element on a folder tree). It is in JS, to run in NodeJS, and has two functions, dir() and dirSync(). dir() is more "pure JS" while dirSync() is more easily portable to other programming paradigms. https://gist.github.com/frnco/bbfdb86d8ac14d5a52b4

I didn't save this anywhere, but I inserted comments where they may be useful.

To run this gist you need NodeJS (Installs fine on Windows) and nothing more. Just save it with a .js extension and run node file.js or simply run node on a terminal and paste the code (But no matter what, remove the last line, dir('/something-that-is-not-too-deep');).

Also, Node is not the onnly option, I just used it since it seems simpler to me to start with it.

This should help you start running node (Or porting it to another language) and traversing folder structures. Then it's just a matter of properly saving this information on a variable.

  • I am learning, but still a beginner compared to many on this site. I am on Windows 7 64 bit. – kosataka Mar 20 '15 at 0:22
  • Well, the fact that I misunderstood what JSON / HTML is, means that I'm more of a beginner than I thought. I've got NodeJS running, copied the Gist into the command window, then a the code that you provided in the Gist appears, but has no disernable output. Is this because I have no folders? where NodeJS is running (I'm running NodeJS off the start menu, not a command prompt)? How would I go about saving it to a variable? Sorry to expand on this. – kosataka Mar 20 '15 at 19:03
  • @kosataka I updated the gist with a working implementation. Copy the code and paste it on a nice text-editor, like Notepad++ or atom.io and replace C:\\SOME_FOLDER with the path to a folder you wanna see, then just paste it all on node console. :D JUST REMEMBER: You need TWO BACKSLASHES, \\ instead of just one, because it`s a special character! – Fernando Cordeiro Mar 21 '15 at 2:54
  • Ooooh, that's pretty cool! The output in the console.log shows file names, but it doesn't show/list the index past the first level. For example, it shows all the contents of C:\\folder, but it doesn't go deeper than that (i.e. C:\\folder\another\folder\test.txt is not displayed). The IDs make sense, as the first folder is ID:0, and the second folder is ID:9, meaning there are 8 items in the first folder (and there are). How do I output the inner contents of the each folder? – kosataka Mar 21 '15 at 6:01
  • Apparently path.sep adding just one "\" was a problem. Did a quick fix on the gist from the cellphone but ideally there should be some code just to fix this issue. Anyways, I believe this should work right now. Also updated id to start as 1 as id 0 may cause issues. :D – Fernando Cordeiro Mar 21 '15 at 7:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.