convert json to html in javascript or jquery

Question

i have send a request to the server and the response i got is in json format that is actually html code converted to json. now i have stored that json response in a variable i want to convert this json to html again..

the JSON response i got from the server is

   {"responseID":"429","statusCode":200,"errors":[],"isSuccessful":true,"statusReason":"OK","responseHeaders":{"ETag":"\"%22520c4e21-98fb-b3f6-3cbf1b0d034f%22&%22_jK7HYWeYEPDB4TQ%22\"","Content-Language":"en-US","Date":"Thu, 25 Apr 2013 05:06:05 GMT","Transfer-Encoding":"chunked","OSLC-Core-Version":"2.0","Keep-Alive":"timeout=5, max=77","X-jazb2":"D=869277 t=1366866365096461","Connection":"Keep-Alive","Content-Type":"application\/rdf+xml","Server":"HTTP_Server","X-Powered-By":"Servlet\/3.0","Proxy-Connection":"Keep-Alive"},"RDF":{"calm":"http:\/\/japp.net\/xmlns\/prod\/jazz\/calm\/1.0\/","dc":"http:\/\/purl.org\/dc\/terms\/","acp":"http:\/\/japp.net\/ns\/acp#","Description":{"about":"https:\/\/japp.net\/rm\/resources\/_ggoxQGEyEeCi3b3g","accessControl":{"resource":"https:\/\/japp.net\/rm\/accessControl\/_xKDFBlV1EeiWC7_0yA"},"_yYlUt1V1EeCWC7_0yA":{"resource":"https:\/\/japp.net\/rm\/types\/_yUzn9FCVbIiWC7_0yA#Text"},"parent":{"resource":"https:\/\/japp.net\/rm\/folders\/_2CgowEeCVbIiWC7_0yA"},"instanceShape":{"resource":"https:\/\/japp.net\/rm\/types\/_03uQpFbIiWC7_0yA"},"_yGllxFVVbIiWC7_0yA":{"resource":"https:\/\/japp.net\/rm\/resources\/_0PoDEeGLFYRnPDB4TQ"},"type":[{"resource":"http:\/\/open-services.net\/ns\/rm#Requirement"},{"resource":"http:\/\/japp.net\/ns\/rm#Text"}],"creator":{"resource":"https:\/\/japp.net\/jts\/users\/dmoul"},"modified":{"CDATA":"2012-03-06T14:27:49.078Z","datatype":"http:\/\/www.w3.org\/2001\/XMLSchema#dateTime"},"_0Rk2CVbIiWC7_0yA":{"resource":"https:\/\/japp.net\/rm\/types\/_0CRPUCVbIiWC7_0yA#47f35e5e-59ea-4432-8b05-ca7c9abb878e"},"title":{"CDATA":"content link","parseType":"Literal"},"created":{"CDATA":"2011-04-07T16:17:17.922Z","datatype":"http:\/\/www.w3.org\/2001\/XMLSchema#dateTime"},"contributor":{"resource":"https:\/\/japp.net\/jts\/users\/moul"},"description":{"parseType":"Literal"},"_bB6cUFWbIiWC7_0yA":{"resource":"https:\/\/japp.net\/jts\/users\/moul"},"PrimaryText":{"parseType":"Literal","div":{"p":[{"id":"_1322948078440","CDATA":"A simple hypertext link in rich text or graphical artifacts that provides navigation only. Content links do not have link types and are not displayed in the Links section of the . See also . ","style":"margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;","a":[{"id":"_1331044057583","CDATA":"RM application","href":"https:\/\/japp.net\/rm\/resources\/_0PoDsWeGEeGLFYTQ"},{"id":"_1322948113737","CDATA":"trace link","href":"https:\/\/japp.net\/rm\/resources\/_id02tWEyEeBj--c3g"}],"br":""},{"id":"_1324333382588","CDATA":"For more information about content links and trace links, see \"Creating links\" in the information center:","style":"margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;","a":{"id":"_1322948136716","CDATA":"http:\/\/publib.boulder.ibm.com\/infocenter\/clmhelp\/v3r0m1\/topic\/com.ibm.rational.rrm.help.doc\/topics\/t_work_links.html","href":"http:\/\/publib.boulder.ibm.com\/infocenter\/clmhelp\/v3r0m1\/topic\/com.ibm.rational.rrm.help.doc\/topics\/t_work_links.html"}},{"id":"_1328282335356","style":"margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;","br":""},{"id":"_1328282335357","CDATA":"This term is defined in the IBM Terminology database as follows:","style":"margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;"},{"id":"_1328282335358","CDATA":"content link: A simple hypertext link in rich text or graphical artifacts that provides navigation only. Related terms: trace link","style":"margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;","br":""}],"xmlns":"http:\/\/www.w3.org\/1999\/xhtml"}},"identifier":{"CDATA":"360","datatype":"http:\/\/www.w3.org\/2001\/XMLSchema#string"},"serviceProvider":{"resource":"https:\/\/japp.net\/rm\/discovery\/_xKDFBlV1EeC7_0yA\/services.xml"}},"rm":"http:\/\/www.ibm.com\/xmlns\/rdm\/rdf\/","oslc_rm":"http:\/\/open-services.net\/ns\/rm#","nav":"http:\/\/jazz.net\/ns\/rm\/navigation#","oslc":"http:\/\/open-services.net\/ns\/core#","rdf":"http:\/\/www.w3.org\/1999\/02\/22-rdf-syntax-ns#","jazz_rm":"http:\/\/japp.net\/ns\/rm#","public_rm_10":"http:\/\/www.ibm.com\/xmlns\/rm\/public\/1.0\/","rm_property":"https:\/\/jazz.net\/rm\/types\/"},"warnings":[],"totalTime":1149,"responseTime":1146,"info":[]}*/

The required format of html for me is

<div xmlns="http://www.w3.org/1999/xhtml">
<p id="_1322948078440" style="margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;">
    A simple hypertext link in rich text or graphical artifacts that provides navigation only. Content links do not have link types and are not displayed in the Links section of the 
<a href="https://jazz.net/rm/resources/_0PoRnPDB4TQ" id="_1331044057583">RM application</a>
. See also 
<a href="https://jazz.net/rm/resources/_id023bnBj--c3g" id="_1322948113737">trace link</a>.
 <br></br></p>
<p id="_1324333382588" style="margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;">
    For more information about content links and trace links, see "Creating links" in the information center: <a href="http://publib.boulder.ibm.com/infocenter/clmhelp/v3r0m1/topic/com.ibm.rational.rrm.help.doc/topics/t_work_links.html" id="_1322948136716">
http://publib.boulder.ibm.com/infocenter/clmhelp/v3r0m1/topic/com.ibm.rational.rrm.help.doc/topics/t_work_links</a>

</p>

<p id="_1328282335356" style="margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;">

    <br></br>
</p><p id="_1328282335357" style="margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;">
    This term is defined in the IBM Terminology database as follows:</p>

<p id="_1328282335358" style="margin-right: 0px; margin-left: 0px; padding: 0px; font-size: 12px; font-family: Arial,sans-serif;">  content link: A simple hypertext link in rich text or graphical artifacts that provides navigation only. Related terms: trace link<br></br></p>

</div>

Please spread you JSON out over multiple lines with indentation - it's very hard to read all in one strip. You can use jsonprettyprint.com to do this automatically if you like. — exists-forall
– exists-forall, Commented Apr 25, 2013 at 5:35
Is all that HTML contained in PrimaryText Property of your JSON string ? Just print that out. JSON is part of javascript, it does not need any conversions to be able to access values — Hanky Panky
– Hanky Panky, Commented Apr 25, 2013 at 5:37
hi @HankyPankyㇱ i have actually pasted half of the json only now i have pasted all json i want the data inside primary text as html — anilgontla
– anilgontla, Commented Apr 25, 2013 at 6:06

Raman Singh · Accepted Answer · 2018-08-14 05:55:15Z

// Start function for JSON to HTML
function json_to_html(json_components, isDiv = false, finalHTML = "")
{
    var jsoncompo = (isDiv) ? JSON.parse(json_components) : json_components;
    var json_len = (jsoncompo).length;
    if (finalHTML == "" && isDiv)
    {
        finalHTML = document.createElement("div");
    }
    for (var i = 0; i < json_len; i++)
    {
        var childele = '';
        var html_components = jsoncompo[i];
        var attributes_arr = html_components.attr;
        finalHTML1 = createstructure(html_components.tag, attributes_arr, html_components.child);
        finalHTML.appendChild(finalHTML1);
    }
    return finalHTML;
}
// End function for JSON to HTML


// Start function for create HTMLstructure from json
function createstructure(type, props, children) {
    var el = document.createElement(type),
            key;
    for (key in props) {
        var keyprops = props[key];
        var hasOwn = Object.keys(keyprops);
        for (var i = 0; i < hasOwn.length; i++)
        {
            el.setAttribute(hasOwn[i], keyprops[hasOwn[i]]);
        }

    }
    if (typeof children != 'undefined') {
        if (Array.isArray(children)) {
            json_to_html(children, false, el);
        } else {
            textnode = document.createTextNode(children);
            el.appendChild(textnode);
        }
    }
    return el;
}
// Start function for create HTMLstructure from json

//define json in string
var jsonPublishData ='[{"tag":"div","attr":[{"class":"box-footer"}],"child":"Hello"}]';

//convert json to html
var resp_html = json_to_html(jsonPublishData, true);

 //define a variable and store html respons data in this variable 
var publishButtonHTML= resp_html.outerHTML

//alert out
alert(publishButtonHTML);

//print out on console
console.log(publishButtonHTML);

Collectives™ on Stack Overflow

convert json to html in javascript or jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related