Rendering Json Using Jquery

I need a simple example that has a json data and I have to parse it and render in html. Can someone suggest me a simple way to do this?

Solution 1:

You can create a string from an object in JavaScript like this...

var jsonString = JSON.stringify(myJsonObject);

Then you can use that string to apply to a html element. For example...

document.getElementById('myDivID').innerText = jsonString;

With JQuery you can update a DIV with the following...

$("#MyDiv").html(jsonString);

Solution 2:

I'm not entirely sure what you are asking. You do not have to use jQuery specifically to parse the object. All you need is standard JavaScript.

Given a JSON string, you can parse it into a JavaScript object using the JSON library

var myJSONObject = JSON.parse(myJSONString);

Or into a string from an object:

var myJSONString= JSON.stringify(myJSONObject);

If you are looking for the individual items of a JSON structure, then you can use a for loop:

for (var key in myJSONObject){
    alert(myJSONObject[key]);
}

I've alerted myJSONObject[key] in the above, however, you can do what you want with it.

You would use jQuery to select out the container into which you wanted the info to be displayed, as suggested in usefan's answer.