Convert hierarchical JSON files to hierarchical jQuery divs

Question

How do I loop through two PARENT-CHILD-relationship (on simple ID PKEY and FKEY) JSON files and display them as a list of divs that are:

1. hierarchical - where child/FKEY divs only appear under the parent/PKEY div (show up as parent-child-child, parent-child-child-child, etc.)
2. expandable - these child/FKEY divs are display:none until you click the parent/PKEY div; ie, items appear/disappear when you click the PKEY div, using jQuery's $(panelID).slideToggle(speed) method
3. able to be toggled with a separate checkbox div if the last key-value pair in the parent div OR child div exists and has key="DEPRECATED"
4. sortable - Just Kidding

jQuery offers me both parseJSON and cool display functions, and I give it atrociously horrible JS-debugging skills in return.

Edit: Here are the two JSON files in question:

types.json:

{"objtype":[{"NAME":"Animal","ID":"15","DEPRECATED":""},{"NAME":"Vegetable","ID":"8"},{"NAME":"Mineral","ID":"2","DEPRECATED":""}]}

objs.json:

{"objinstance":[{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"8","OBJNAME":"Fruit salad consisting of oranges and mangoes","OBJID":"454","DATEEXPIRES":"2014-09-01 00:00:00.0","DEPRECATED":""},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"8","OBJNAME":"Spicy V-8 juice","OBJID":"499","DATEEXPIRES":"2015-01-02 00:00:00.0"},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"2","OBJNAME":"Rental agreement for new apartment","OBJID":"2885","DATEEXPIRES":"2015-08-25 00:00:00.0"},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"2","OBJNAME":"Salt","OBJID":"1033","DATEEXPIRES":"","DEPRECATED":""},{"DATEBOUGHT":"","OBJTYPEID":"15","OBJNAME":"Koko the Monkey","OBJID":"68","DATEEXPIRES":"","DEPRECATED":""},{"DATEBOUGHT":"","OBJTYPEID":"15","OBJNAME":"Bubbles the Clown","OBJID":"69","DATEEXPIRES":"","DEPRECATED":""}]}

Answer 1

Here is an extremely simple example of how you could generate HTML markup based on your data in JSON.

Algorithm :

1. Parse JSON string into Javascript objects
2. Iterate parent data
3. For each parent data, create parent div and add required content into it.
4. Iterate child data, search for common id
5. For each child data which matches the parent id , create child div , add required content into it, and finally append to the parent div
6. Append parent div to a container or body
7. Rinse, lather, repeat
8. Create CSS styles as per your taste

.

Demo Fiddle: http://jsfiddle.net/abhitalks/h3nbwc1f/

Snippet :

 var typesString = '{"objtype":[{"NAME":"Animal","ID":"15","DEPRECATED":""},{"NAME":"Vegetable","ID":"8"},{"NAME":"Mineral","ID":"2","DEPRECATED":""}]}'; var objsString = '{"objinstance":[{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"8","OBJNAME":"Fruit salad consisting of oranges and mangoes","OBJID":"454","DATEEXPIRES":"2014-09-01 00:00:00.0","DEPRECATED":""},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"8","OBJNAME":"Spicy V-8 juice","OBJID":"499","DATEEXPIRES":"2015-01-02 00:00:00.0"},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"2","OBJNAME":"Rental agreement for new apartment","OBJID":"2885","DATEEXPIRES":"2015-08-25 00:00:00.0"},{"DATEBOUGHT":"2014-08-26 00:00:00.0","OBJTYPEID":"2","OBJNAME":"Salt","OBJID":"1033","DATEEXPIRES":"","DEPRECATED":""},{"DATEBOUGHT":"","OBJTYPEID":"15","OBJNAME":"Koko the Monkey","OBJID":"68","DATEEXPIRES":"","DEPRECATED":""},{"DATEBOUGHT":"","OBJTYPEID":"15","OBJNAME":"Bubbles the Clown","OBJID":"69","DATEEXPIRES":"","DEPRECATED":""}]}'; var types = JSON.parse(typesString); var objs = JSON.parse(objsString); types.objtype.forEach(function(item, idx) { var $parent = $("<div class='parent' />"); var $label = $("<label>").text(item.ID + ': ' + item.NAME).attr('for', 'c' + idx); var $input = $('<input type="checkbox">').attr('id', 'c' + idx); $parent.append($label); $parent.append($input); objs.objinstance.forEach(function(item2) { if (item2.OBJTYPEID == item.ID) { var $child = $("<div class='child' />"); var txt2 = item2.OBJID + ': ' + item2.OBJNAME; $child.text(txt2); $parent.append($child); } }); $("#wrap").append($parent); }); 

 div#wrap { font-family: helvetica, sans-serif; font-size: 17px; } div.parent { border: 1px solid blue; padding: 8px; margin: 4px; } div.child { border: 1px solid green; font-size: 15px; padding: 0px; margin: 0px; opacity: 0; height: 0px; transition: all 250ms; } label { cursor: pointer; } input[type=checkbox] { display: none; } input[type=checkbox]:checked ~ div.child { padding: 8px; margin: 8px; opacity: 1; height: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"></div>