Javascript: convert JSON flat folder to JSON tree data object & tree structure on a web page

This project will provide 2 separate javascript function(s): Function 1: Accepts a text object containing a JSON formatted text dataset of a flat directory listing & converts it into an recursive ordered tree structured data object, returning the object handle to the calling function Function 2: Accepts a javascript object handle containing the output of function 1 above, parses data contents into a browser renderable tree structure format including HTML / Data / CSS for insertion into an empty div on a web page See details below for examples and additional information ## Deliverables Deliverables will include: 2 Javascript function(s), & separate CSS such that: * I can simply add the target div to a web page * include your provided project solution javascript & css * I call function 1 passing the input JSON formatted text as the sole function parameter and it returns the output JSON object handle * I call function 2 passing an object handle as the sole parameter the output as specified & as per the example appear on the web page in the target div * MUST be 2 separate functions * A documentation sample of the output of function 1 in plain text (like the sample provided below illustrating the JSON data structure) JQuery 1.6.4 is available for use as required, no other libraries may be used. The target platform is an embedded web server with constrained file system resources so tightness of code is appreciated ==================== Function 1 input example: Sample input JSON { "files":[ {"name":"/[login to view URL]", "size":0}, {"name":"/[login to view URL]", "size":0}, {"name":"/jquery/[login to view URL]", "size":12402}, {"name":"/jquery/[login to view URL]", "size":30988}, {"name":"/pnp/js-css/[login to view URL]", "size":2897}, {"name":"/jquery/[login to view URL]", "size":131}, {"name":"/pnp/[login to view URL]", "size":746}, {"name":"/pnp/[login to view URL]", "size":2725}, {"name":"/pnp/btns/[login to view URL]", "size":1098}, {"name":"/pnp/dial/[login to view URL]", "size":463}, {"name":"/pnp/dial/[login to view URL]", "size":3617}, {"name":"/pnp/icons/[login to view URL]", "size":688}, {"name":"/pnp/icons/[login to view URL]", "size":1154}, {"name":"/pnp/btns/[login to view URL]", "size":1207}, {"name":"/pnp/icons/zed/[login to view URL]", "size":451}, {"name":"/pnp/js-css/[login to view URL]", "size":3612}, {"name":"/pnp/js-css/[login to view URL]", "size":19757}, {"name":"/pnp/json/[login to view URL]", "size":61}, {"name":"/pnp/json/[login to view URL]", "size":55}, {"name":"/pnp/json/[login to view URL]", "size":260}, {"name":"/zedd/leds/[login to view URL]", "size":1314} ] } Note re function 1 input: entries can be out of order, your solution will insert them into the correct locations in the tree data object that is the output from function 1. ================= Output of function 1 (partial example only): { ? ? "name":"/", ? ? ? "folder":1, ? ? ? "hasChildren":1, ? ? ? "children":[ ? ? ? ? ? ? {"name":"[login to view URL]", "folder":0, "size": 0}, ? ? ? ? ? ? {"name":"[login to view URL]", "folder":0, "size": 0}, ? ? ? ? ? ? {"name":"jquery/", "folder":1, "hasChildren":1, ? ? ? ? ? ? ? ? ? "children":[ ? ? ? ? ? ? ? ? ? ? ? ? {"name":"[login to view URL]", "folder":0, "size": 12402}, ? ? ? ? ? ? ? ? ? ? ? ? {"name":"[login to view URL]", "folder":0, "size": 30988}, ? ? ? ? ? ? ? ? ? ? ? ? {"name":"docs/", "folder":1, "hasChildren":1, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "children":[ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {"name":"[login to view URL]", "folder":0, "size": 30988} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ] ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ] ? ? ? ? ? ? } ? ? ? ] } Notes on the output of function 1 * you (the developer) can determine / tailor structure of this step, above is an (incomplete) example to demonstrate the recursive nature of the data as it moves down the directory tree =============== Function 2 output example (web page view): |[login to view URL] |[login to view URL] |---+jquery/ | |[login to view URL] | |[login to view URL] | |[login to view URL] |---+pnp/ | |[login to view URL] | |[login to view URL] | |---+btns/ | | |[login to view URL] | | |[login to view URL] | |---+dial/ | | |[login to view URL] | | |[login to view URL] | |---+icons/ | | |[login to view URL] | | |[login to view URL] | | |----+zed/ | | |[login to view URL] | |---+js-css/ | | |[login to view URL] | | |[login to view URL] | | |[login to view URL] | |---+json/ | | |[login to view URL] | | |[login to view URL] | | |[login to view URL] |---+zed/ |---+leds/ |[login to view URL] Note re output HTML: * Fixed font * Logically ordered: * For each folder: * List files first alphabetically, * Folders second, alphabetically * Each file in the generated listing: * is a clickable hyperlink to the source, ie for the last file in the listing above this is a link to "/zed/leds/[login to view URL]" * has its 'title =' attribute set to the "nnnn bytes" where nnnn: * the file size per the source file? * comma formatted, ie 12402 displays as "12,402 bytes" * Folders have no title attribute, and no hyperlink * There is no dynamic ability to expand / collapse trees, full tree is rendered expanded as a static listing * There are no icons/images to indicate folder vs file etc, just the characters per the example above