Tips for showcasing unprocessed JSON information on a webpage

Question

Tips for showcasing unprocessed JSON information on a webpage

Similar Question:
JSON pretty print using JavaScript

I am looking to present my raw JSON data on an HTML page similar to how JSONView displays it. Here is an example of my raw JSON data:

{
   "hey":"guy",
   "anumber":243,
   "anobject":{
      "whoa":"nuts",
      "anarray":[
         1,
         2,
         "thr<h1>ee"
      ],
      "more":"stuff"
   },
   "awesome":true,
   "bogus":false,
   "meaning":null,
   "japanese":"明日がある。",
   "link":"http://jsonview.com",
   "notLink":"http://jsonview.com is great"
}

This data is sourced from . What I aim to accomplish is similar to when using Chrome with the JSONView plugin installed.

I have attempted to understand the process but have not succeeded. I am looking to use a JavaScript script (with CSS for formatting) to customize the display of my raw JSON data retrieved via AJAX and then place it on an HTML page within a specified element like a div. Are there any JavaScript libraries available to achieve this task, or could you provide guidance on how to achieve this?

javascript jquery html css json

Answer 1

Answer №1

To display JSON data on an HTML page, you can easily use JSON.stringify.

For instance, if your JSON is structured like this:

var jsonData = {
        text: "example",
        number: 1
    };

You can convert it to a string with this simple code:

var jsonString = JSON.stringify(jsonData);

Then you can directly insert it into your HTML code, like so:

document.body.innerHTML = jsonString;

Consider replacing body with another element using getElementById.

Regarding the CSS aspect, you have the option to use RegExp to modify the stringified object before placing it in the DOM. For illustration, the code snippet provided should handle the formatting of curly braces (also available on JSFiddle for demonstration).

var jsonData = {
        text: "example",
        number: 1,
        obj: {
            "more text": "another example"
        },
        obj2: {
             "yet more text": "yet another example"
        }
    }, // THE RAW OBJECT
    jsonString = JSON.stringify(jsonData),  // THE OBJECT STRINGIFIED
    formattedString = '', // AN EMPTY STRING TO STORE THE FORMATTED OBJECT STRING
    tracker = {
            brace: 0
        }; // AN OBJECT TO TRACK INCREMENTS/DECREMENTS,
           // MAINLY FOR CURLY BRACES (COULD ADD MORE PROPERTIES)

formattedString = jsonString.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (match, p1) {
var returnFunc = function() {
        return '<div style="text-indent: ' + (tracker['brace'] * 20) + 'px;">' + p1 + '</div>';
    },
    returnString = 0;
    if (p1.lastIndexOf('{') === (p1.length - 1)) {
        returnString = returnFunc();
        tracker['brace'] += 1;
    } else if (p1.indexOf('}') === 0) {
         tracker['brace'] -= 1;
        returnString = returnFunc();
    } else {
        returnString = returnFunc();
    }
    return returnString;
});

document.body.innerHTML += formattedString; // appends the result to the HTML document body

This code segments the object sections within the string and organizes them into div elements. It adjusts indentation when encountering curly braces, similarly to the 'space' argument in 'JSON.stringify'. You can adapt this as a foundation for different formatting styles.

Answer 2

To display JSON data on an HTML page, you can easily use JSON.stringify.

For instance, if your JSON is structured like this:

var jsonData = {
        text: "example",
        number: 1
    };

You can convert it to a string with this simple code:

var jsonString = JSON.stringify(jsonData);

Then you can directly insert it into your HTML code, like so:

document.body.innerHTML = jsonString;

Consider replacing body with another element using getElementById.

Regarding the CSS aspect, you have the option to use RegExp to modify the stringified object before placing it in the DOM. For illustration, the code snippet provided should handle the formatting of curly braces (also available on JSFiddle for demonstration).

var jsonData = {
        text: "example",
        number: 1,
        obj: {
            "more text": "another example"
        },
        obj2: {
             "yet more text": "yet another example"
        }
    }, // THE RAW OBJECT
    jsonString = JSON.stringify(jsonData),  // THE OBJECT STRINGIFIED
    formattedString = '', // AN EMPTY STRING TO STORE THE FORMATTED OBJECT STRING
    tracker = {
            brace: 0
        }; // AN OBJECT TO TRACK INCREMENTS/DECREMENTS,
           // MAINLY FOR CURLY BRACES (COULD ADD MORE PROPERTIES)

formattedString = jsonString.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (match, p1) {
var returnFunc = function() {
        return '<div style="text-indent: ' + (tracker['brace'] * 20) + 'px;">' + p1 + '</div>';
    },
    returnString = 0;
    if (p1.lastIndexOf('{') === (p1.length - 1)) {
        returnString = returnFunc();
        tracker['brace'] += 1;
    } else if (p1.indexOf('}') === 0) {
         tracker['brace'] -= 1;
        returnString = returnFunc();
    } else {
        returnString = returnFunc();
    }
    return returnString;
});

document.body.innerHTML += formattedString; // appends the result to the HTML document body

This code segments the object sections within the string and organizes them into div elements. It adjusts indentation when encountering curly braces, similarly to the 'space' argument in 'JSON.stringify'. You can adapt this as a foundation for different formatting styles.

Answer 3

Answer №2

Keep in mind that the link you shared is not an HTML page, but rather a JSON document. The browser takes care of the formatting.

You need to decide:

Whether you prefer displaying the raw JSON (not in an HTML page), similar to your example
To showcase an HTML page with formatted JSON

If you choose option 1, instruct your application to present a response body with the JSON, specify the MIME type (application/json), and so forth. The browser (and/or browser plugins) will handle the formatting in this scenario.

For option 2, it involves creating a basic HTML page with the JSON content that can be highlighted in various ways:

On the server-side, depending on your technology stack. There are solutions available for almost every programming language.
On the client-side using JavaScript highlight libraries.

Providing more information about your technology stack will make it easier to offer examples or resources.

EDIT: If you opt for client-side JS highlighting, you might want to consider using highlight.js.

Answer 4

Keep in mind that the link you shared is not an HTML page, but rather a JSON document. The browser takes care of the formatting.

You need to decide:

Whether you prefer displaying the raw JSON (not in an HTML page), similar to your example
To showcase an HTML page with formatted JSON

If you choose option 1, instruct your application to present a response body with the JSON, specify the MIME type (application/json), and so forth. The browser (and/or browser plugins) will handle the formatting in this scenario.

For option 2, it involves creating a basic HTML page with the JSON content that can be highlighted in various ways:

On the server-side, depending on your technology stack. There are solutions available for almost every programming language.
On the client-side using JavaScript highlight libraries.

Providing more information about your technology stack will make it easier to offer examples or resources.

EDIT: If you opt for client-side JS highlighting, you might want to consider using highlight.js.

Answer 5

Answer №3

Embedding JSON in an HTML tag other than the <script> tag simply results in plain text. It's like adding a little narrative to your HTML page.

However, when it comes to styling and formatting, that's a whole different story. Perhaps consider changing the title of your query.

Check out this question for more insights. You can also visit this page for additional information.

Answer 6

Embedding JSON in an HTML tag other than the <script> tag simply results in plain text. It's like adding a little narrative to your HTML page.

However, when it comes to styling and formatting, that's a whole different story. Perhaps consider changing the title of your query.

Check out this question for more insights. You can also visit this page for additional information.

Tips for showcasing unprocessed JSON information on a webpage

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble retrieving responseText from an AJAX request using Laravel

There is an error message in Vue nextTick: "TypeError: this.method is not a function." The error only appears in my console, but the functionality seems to be working correctly in the browser

"Conceal and reveal dynamic content using the power of jQuery's

What is the best way to include a JavaScript variable within CSS styling?

Exploring the utilization of functions beyond module exports

What is the importance of fulfilling a promise in resolving a response?

What is the most effective method for transferring resolved promise values to a subsequent "then" chain?

Unable to change the visibility of blockquotes using jquery

Prevent mobile users from entering text with Material UI Autocomplete on keyboard

jQuery .CSS is not working for positioning the element at the bottom right corner!

Discovering the art of integrating RSS feed with GAE database

Bidirectional Data Flow with rxjs in Angular

Ways to implement two functions within a single onclick event

The module 'iap_verifier' could not be located

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Decrease the heaviness of a Glyphicon

NextJS will redirect the user back to the previous router they came from following authentication

The Angular Material layouts demonstration is experiencing technical difficulties

Is there a way to retrieve text content from a modal using JavaScript?

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form