Transforming nested JSON files into nested jQuery divs

Question

Transforming nested JSON files into nested jQuery divs

Is it possible to iterate through two JSON files that have a parent-child relationship based on simple ID primary and foreign keys? Can we then display the data in a list of divs with the following characteristics:

Hierarchical - child divs should only appear under their respective parent divs, creating a structure like parent-child-child or parent-child-child-child.
Expandable - child divs are initially hidden (display:none) but can be revealed by clicking on the parent div using jQuery's $(panelID).slideToggle(speed) method.
Togglable with a separate checkbox - if the last key-value pair in either the parent or child div contains a key of "DEPRECATED", they should be able to be toggled.
Sortable - Just kidding!

I rely on jQuery for functions such as parseJSON and cool display features, even though my JavaScript debugging skills leave much to be desired.

Edit: Below are the contents of the two JSON files being referenced:

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":""}]}

javascript jquery html css json

Answer 1

Answer №1

Consider this straightforward demonstration of how HTML markup can be dynamically generated using JSON data.

Approach:

Parse the JSON string into JavaScript objects
Iterate through the parent data
For each parent data, create a parent div and populate it with the necessary content
Go through the child data and look for matching id
For every child data that matches the parent id, create a child div, insert the required content, and then append it to the parent div
Attach the parent div to a container or the body
Repeat the process as needed
Customize CSS styles according to your preferences

.

Live Example: http://jsfiddle.net/abhitalks/h3nbwc1f/

Code 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>

Answer 2

Consider this straightforward demonstration of how HTML markup can be dynamically generated using JSON data.

Approach:

Parse the JSON string into JavaScript objects
Iterate through the parent data
For each parent data, create a parent div and populate it with the necessary content
Go through the child data and look for matching id
For every child data that matches the parent id, create a child div, insert the required content, and then append it to the parent div
Attach the parent div to a container or the body
Repeat the process as needed
Customize CSS styles according to your preferences

.

Live Example: http://jsfiddle.net/abhitalks/h3nbwc1f/

Code 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>

Transforming nested JSON files into nested jQuery divs

Answer №1

Similar questions

Setting the error name in an extended Error class in Node.js: A step-by-step guide

Playing around with Segment Analytics testing using Jest in TypeScript

Cut out a passage by using a polyline shape

AngularJS and numerous parallel indexed tables side by side

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

Utilize C# and SmtpClient to efficiently send HTML emails

Conceal or reveal buttons using JavaScript

Displaying a specific division solely on mobile devices with jQuery

How can I modify the fill color of a Cell when hovering over a Bar Chart in Recharts?

Exploring the Vanilla JavaScript alternative to the jQuery.each() function

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

Varying levels of scaling on iPhone and iPad

json Exploring Input/Output Operations in SQL Server

Utilize Java to launch the HTML file in a web browser

When adding classes using Angular's ng-class, CSS3 transitions are not activated

Last item in Material UI Grid container not filling up entire space

Transform Vue.js into static HTML output

Learn how to display a tooltip for every individual point on a Highcharts network graph within an Angular

Injecting controllers and classes dynamically using AngularJS

Assigning a value using HTML code causes the input to malfunction