CODEWITHSUNDEEP
htmljsondojoxmlhttprequest
Jane Wilkie
Jane Wilkie

Reputation: 1743

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

Upvotes: 1

Views: 2492

Answers (3)

Vixed
Vixed

Reputation: 3509

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))
})

Upvotes: 0

Habax
Habax

Reputation: 1332

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

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

Upvotes: 1

Kyle
Kyle

Reputation: 2872

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.

Upvotes: 1

Related Questions