Skip to content

Display raw JSON data in HTML | Example code

  • by

Using the JSON stringify method you can Display raw JSON data in HTML. Use the third argument which enables pretty printing and sets the spacing to use.

Sample JSON data:

var jsonVar = {
        text: "example",
        number: 1

Then you need only do this to convert it to a string:

var jsonStr = JSON.stringify(jsonVar);

And then you can insert into your HTML directly, for example:

document.body.innerHTML = jsonStr;

You can replace body with some other element via getElementById.


Display raw JSON data in HTML

Simple example code using pre-tag to show JSON data, you can use any tag.

<!DOCTYPE html>

  <pre id="jtext"></pre>

    var obj =  {
      "anarray":[1,2, "three"],

  var str = JSON.stringify(obj, null, 2);
  document.getElementById("jtext").innerHTML = str;




Display raw JSON data in HTML

Do comment if you have any doubts or suggestions on this JS JSON topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published. Required fields are marked *