Dynamically build dom tree from json

Question

This is my JSON data. I need to build a dom where the nodes built inside its children. I am able to build a dom for the node without children. Any pointers on how to build the dom tree with childrens contained inside the parent would be appreciated

 {
       "widgetData":[
          {
             "label":"node1",
             "color":"red",
             "children":[
                {
                   "label":"vip1",
                   "color":"red",
                   "children":[
                      {
                         "label":"obj1",
                         "color":"gray",
                         "id":"539803eae4b0ffad82491508"
                      },
                      {
                         "label":"obj2",
                         "color":"green",
                         "id":"5395635ee4b071f136e4b691"
                      },
                      {
                         "label":"obj3",
                         "color":"green",
                         "id":"539803e4e4b0ffad82491507"
                      }
                   ],
                   "id":"53956358e4b071f136e4b690"
                },
                {
                   "label":"vip2",
                   "color":"blue",
                   "id":"539803f2e4b0ffad82491509"
                }
             ],
             "id":"5395634ee4b071f136e4b68e"
          },
          {
             "label":"node2",
             "children":[
                {
                   "label":"vip1",
                   "color":"green",
                   "id":"539803eae4b0ffad82491501"
                },
                {
                   "label":"vip2",
                   "color":"green",
                   "id":"5395635ee4b071f136e4b694"
                }
             ],
             "id":"5395637fe4b071f136e4b692"
          },
          {
             "label":"node3",
             "color":"red",
             "children":[

             ],
             "id":"53956371f136e4b692"
          },
          {
             "label":"node4",
             "color":"red",
             "children":[

             ],
             "id":"5656"
          },
          {
             "label":"node5",
             "color":"red",
             "children":[
             ],
             "id":"5395637fe4b071f13b692"
          }
       ]
    }

javascript code that i have tried

for (var i = 0; i <jsonData.length; i++) {
                    var $divParent  = $("<div></div>");
                    $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);
                    if (jsonData[i].children.length >0 ) {


                    }
                    else {
                        container.append($divParent);
                    }
                }

container is the DIV element

Needed a solution to where my depth of my children can increase.

http://stackoverflow.com/questions/27198694/accesing-nested-properties-json — Alexander Ceballos, Feb 03 '15 at 13:33

Maurice Perry · Accepted Answer · 2015-02-03T14:00:15.437

6

You nearly nailed it. What you need is recursion:

function appendDom(container, jsonData) {
    for (var i = 0; i <jsonData.length; i++) {
        var $divParent  = $("<div></div>");
        $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);
        if (jsonData[i].children) {
            appendDom($divParent, jsonData[i].children);
        }
        container.append($divParent);
    }
}

Here is a fiddle: http://jsfiddle.net/robbyn/x15h2g6v/

edited Feb 03 '15 at 14:00

answered Feb 03 '15 at 13:43

Maurice Perry

32,610
9
70
97

I get an error while is try using recursion jsonData[i].children is undefined – Karthik Feb 03 '15 at 14:09
Yes, I have changed the code slightly: I've added the test – Maurice Perry Feb 03 '15 at 14:20
Hey @Maurice can u let me know what is the change that you did because i almost tried the same before posting a question. I was getting the same error. I would be great to know my mistake – Karthik Feb 03 '15 at 14:22
I've added the test if (jsonData[i].children) { – Maurice Perry Feb 03 '15 at 14:25
i previously checked and called the function inside if (jsonData[i].children.length >0 ) { } but still was getting error. Any how thanks mate solved the issue. – Karthik Feb 03 '15 at 14:31

score 2 · Answer 2 · answered Feb 03 '15 at 13:42

Call your function to append children recursively, like this:

function appendChildren(parentEl, children) {
      for (var i = 0; i < children.length; i++) {
        var child = children[i],
            element = $('<div />');
        element.text(child.label).attr(child.id);
        appendChildren(element, child.children);
        parentEl.append(element);
      }
    }

var root = $('body');
appendChildren(root, jsonData);

Alexander Shutau · Answer 3 · 2015-02-03T13:50:50.617

You may need to create an attribute-value-function map like this:

var map = {
    'label': function(value) { 
        return function(el) { el.text(value); };
    },
    'color': function(value) { 
        return function(el) { el.css('color', value); }; 
    },
    'children': function(items) { 
        return function(el) {
            items.forEach(function(item) { 
                var child = create(item);
                el.append(child);
            });
        };
    }
};

Then you may create an initializer-function:

function create(markup) {
    var el = $('<div>');
    var actions = [];
    for (var key in markup) {
        var value = markup[key];
        var act = map[key](value);
        actions.push(act);
    }
    actions.forEach(function(act) {
        act(el);
    });
    return el;
}

And finally call:

$('body').append(create(markup));

score -1 · Answer 4 · answered Feb 03 '15 at 13:41

Something like this?

for (var i = 0; i < jsonData.length; i++) {
    // Create parent
    var $divParent  = getHtml(jsonData[i]);

    $divParent.text(jsonData[i].label).attr('id',jsonData[i].id);

    // Check if JSON element has "children" property which is an array and has elements
    if (jsonData[i].children && jsonData[i].children.constructor === Array && jsonData[i].children.length) {
        for (var c = 0; c < jsonData[i].children.length; c++) {
            // Generate child HTML and append to parent
            var childHtml = getHtml(jsonData.children[c]);
            $divParent.Html($divParent.Html() + childHtml);
        }
    }

    container.append($divParent);
}

function getHtml(jsonObject) {
    var $div = $("<div></div>");
    $div.text(jsonObject.label).attr('id', jsonObject.id);
    return $div;
}

Dynamically build dom tree from json

4 Answers4