JavaScript Render a tree object as HTML elements

I am having some difficulties with this problem. I want to render some html elements given a tree structure. For example this javascript tree object:

let htmlTree = {
    id: "a",
    children: [{
        id: "b",
        children: []
    }, {
        id: "c",
        children: [{
            id: "d",
            children: []
        }]
    }]
};

Should output a string like this:

<a>
    <b>
    </b>
    <c>
        <d></d>
    </c>
</a>

What I tried doing was a breadth first traversal (iterative) of the tree object but was having some issues actually knowing when to apply the close tag of the element for the nested cases. Any help is appreciated, i've been stumped on this all day :(

Answer:1

This'll make the string without line breaks...and I'm using var instead of let for more compatibility

var outputStr='';
function checkChildren(parentObj){
    outputStr+='<'+parentObj.id+'>';
    if(parentObj.children.length>0)
        parentObj.children.forEach(checkChildren);
    outputStr+='</'+parentObj.id+'>';
}
checkChildren(htmlTree);

And it is easy to modify if you do need it to have the line breaks. Here's a working jsfiddle

Answer:2

I know you already have an answer for this, but I thought this was valid to add to the discussion. You can have the Javascript dom functions do the heavy lifting for you. This might be valuable in more complex scenarios.

function create_node(obj){
    var node = document.createElement(obj.id);
    for (var i in obj.children) {
        node.appendChild(create_node(obj.children[i]));
    }
    return node;
}
console.log(create_node({id:'root',children:[htmlTree]}).innerHTML);

JSFiddle: http://jsfiddle.net/trex005/8gxe7z3b/

note : to get the full HTML, I wrapped it in a parent node to use innerHTML since there is no cross browser way of getting the outterHTML.

Answer:3

Try this

var treeRendrer = function(treeObj,parent){
      if(treeObj && treeObj.hasOwnProperty("id")){
         parent.appendChild(document.createElement(treeObj["id"]))
      }
      if(treeObj && treeObj.hasOwnProperty("children")){
         treeObj.children.forEach(function(childObj){
            treeRendrer(childObj, parent.firstChild)
         });
      } 
    }
Answer:4

For dynamic page changes without having to reload the whole content, I have found this very simple working solution: Tutorial: http://css-tricks.com/rethinking-dynamic-page-replacing-content/ Demo: ...

For dynamic page changes without having to reload the whole content, I have found this very simple working solution: Tutorial: http://css-tricks.com/rethinking-dynamic-page-replacing-content/ Demo: ...

I already check the answer from here and so how can I make it for multiple data. In order for me to set a timer for a specific service for example. So here is my script. <script type="...

I already check the answer from here and so how can I make it for multiple data. In order for me to set a timer for a specific service for example. So here is my script. <script type="...

So, I am trying to create a game with blocks in the level being send from the server. I have loop cycling through the blocks each time it recieves an update from the server. It will then if the block ...

So, I am trying to create a game with blocks in the level being send from the server. I have loop cycling through the blocks each time it recieves an update from the server. It will then if the block ...

  1. html referring to an external style sheet

Currently I have the following code which will setup a sinon server and do some other stuff, FakeServer is an AMD module that I can import into my tests. It has a create() and destroy() method: ...

Currently I have the following code which will setup a sinon server and do some other stuff, FakeServer is an AMD module that I can import into my tests. It has a create() and destroy() method: ...