I am looking to create a JSON OR HTML file that will accurately give the folder/

Question

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.

Explanation / Answer

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.

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.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.