Render arbitrary JSON in HTML

Question

I\'m writing a data viewer page to render objects being sent as JSON from the server. The JSON objects vary in content and complexity, from flat objects with a handful of at

Answer 1

You can use pre-existing libraries which do JSON to HTML rendering and conversion automatically. But if you want to do more personalized things after reading/rendering the JSON, you can very well rely on plain old JavaScript (after all, all the .js libraries are written using plain old JS)

Basically, you need to render the JSON and extract data out of it. Once you have the data you want, you can convert it to whichever format you want. What you need to do is, perform a check on the type of object and if it is a primitive data type, extract the data, and if not, perform a recursive call until you find primitive data type.

The code snippet for this is :

function renderJson(jsonObject){   
    for(var objType in jsonObject){
        if(typeof jsonObject[objType] === 'object'){
            renderJson(jsonObject[objType]);
        }
        else{
            alert(' name=' + objType + ' value=' + jsonObject[objType]);
        }
    }
}

Try here

This is a very basic code snippet. You can modify this snippet to suit your needs.

Refer http://www.json.org/js.html for more details on how you can play around with JSON objects and arrays using JS.