CODEWITHSUNDEEP
javascriptjsonajax
WoJ
WoJ

Reputation: 29967

How to output, from JavaScript, JSON output so that it is recognized as JSON?

EDIT: Following an exchange with guest271314, I realized that the wording of the questions (in the body of my question) may be misleading. I kept the old version stroked out and better reworded a new version

Background: When getting JSON from remote servers, the response headers include a Content-Type: application/json entry which suggests to the browser to render the content as JSON. This enables Chrome extensions or native Firefox functionalities to format the output:

enter image description here

My problem: I would like to get the same rendering (done by the browser) with JavaScript-provided JSON, by first fetching the content, and then pushing it into the DOM. This does not work, I can only get a JSON string, rendered as a string. the JSON is rendered as a string, and not formatted by the browser.

My thoughts so far: it looks like I fail to

The code I tried is the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- here I am trying to simulate the response headers so that the
    browser is hinted of the content type -->
    <meta http-equiv="content-type" content="application/json; charset=UTF-8"/>
</head>
<body>
    <div id='root'></div>
    <script>
        fetch('https://httpbin.org/get')
            .then(function (r) {
                if (r.ok) {
                    return r.json()
                }
                throw new Error('response was not ok: ' + r.statusText)
            })
            .then(function (text) {
                // here I am stringyfying the JSON Object and replacing a DOM
                // element with it (including the delimiters). The string is 
                // unfortunately quote-delimited
                document.getElementById('root').outerHTML = JSON.stringify(text)
            })
            .catch(function (err) {
                console.log(err)
            })
    </script>
</body>
</html>

The effect on the same source:

enter image description here

Is it possible to achieve from JS the same effect as querying the source directly in the browser? to have JavaScript-generated JSON being pretty-rendered by the browser own mechanisms (built-in or via an extension)?

Upvotes: 1

Views: 1056

Answers (4)

Jonas
Jonas

Reputation: 755

The problem is that your document is displayed as text/html while httpbin.org/get has application/json as document-type. You already used

<meta http-equiv="content-type" content="application/json; charset=UTF-8"/>

but if you right click the page in firefox (chrome apparently does not have this option) and select view pageinformation (or something like that), the type is still text/html although the header in dev tool already shows content-type: application/json. Also, when you take a look at the Response in dev tools, your response is a html file while the response from httpbin.org/get is plain json with no body tag etc.

So I've tried to replace the whole html content with the json content:

document.documentElement.outerHTML = JSON.stringify(text)
// or
document.documentElement.outerHTML.replace(JSON.stringify(text))

But the first gives an error (Modifications are not allowed for this document). The second just replaces the whole content of <body></body> with the JSON data. But it still does not work. So unless you don't use a backend server that just retruns the JSON once the site is called, it won't be possible to use the browsers JSON viewer.

Another option would be to redirect:

window.location = "https://httpbin.org/get";

Upvotes: 1

Joe Dowd
Joe Dowd

Reputation: 39

Serving JSON is done on the server side, not the the client side.

A HTML header of Content-Type: application/json does need to be sent along with the response but no HTML can be present in the response body.

I suggest looking into NodeJS and the Express library to get started building a server side javascript application.

Upvotes: 0

guest271314
guest271314

Reputation: 1

If gather Question correctly you can use <pre> element to render JSON and use third parameter of JSON.stringify() for indentation

<pre id='root'></pre>


document.getElementById('root').textContent = JSON.stringify(text, null, 4)

Upvotes: 0

Kim
Kim

Reputation: 150

Well, your browser extension cannot catch this. And I do not see any option. Headers are already sent, when the JavaScript has been executed, so I guess, your Extension is out of the game.

The stringify() function by the way works fine. What you want is a human readable output.

Have you thought of JavaScript code highlighters like

There should be one that supports JSON rendering like your browser extension.

Upvotes: 1

Related Questions