Rendering JSON to HTML

just a quick question to hopefully get pointed in the right direction. I took over for another developer and I'm flying by the seat of my (now ripped LOL!) pants. I have a webpage that has the JSON included and I simply need to render it to HTML. Now for the gory details... I'm building a help page (using Catalyst/Template Toolkit and Dojo). I have succeede开发者_JS百科d far enough to build the page with the tabs and including the JSON chunk. YAY! for me (Really you have no idea how good I feel for being able to do just THAT!)

This is more of a question of where to go next and any pointers would be appreciated.

Is it best to get dojo to read the JSON and write it out to a div somehow? Any hint as to how I would go about that? When Googling "JSON to HTML" I get plenty of suggestions for third party products and I'm not that greatly familiar with DOJO yet and even less so with AJAX.

Any advice would be greatly appreciated... Janie

This page from the Dojo documentation might be helpful. It refers to the library's function dojo.fromJson to convert a string of JSON-formatted text to a JavaScript object. You could then access the properties of the object and insert them with HTML into a div tag.

With Firebug: console.log('myVar: ', myVar);

Here a function JSON to string: http://scriptnode.com/article/javascript-print_r-or-var_dump-equivalent/

It can be improved a lot, but hope can help you. https://jsfiddle.net/VixedS/vz9L4c83/

var object= {xHtml:[{'tag':'input','placeholder':'name:','size':12},{'tag':'br'},{'tag':'textarea','style':'color:#FFF;background:blue;','content':'Hello world '}]};

$.each(object.xHtml,function(key,val){
    var el=$('<'+this.tag+' />');
        $.each(this,function(key,val){
        console.log(key,val);
          if (!(key=='content') || !(key=='tag'))
             el.attr(key,val)
        });
    $('body').append(el.append(this.content))
})