HTML：加载 JSON<pre> 和 element; adding line breaks element; adding line breaks

Question

I want to display the content of a json file on a web page nicely. That's how I do it:

{
  "name": "Hans",
  "age": 12,
  "favorite food": "Spätzlepfanne",
  "siblings": false
}

(silly example ... I know :D)

function loadJSON(url, callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType('application/json');
    xobj.open('GET', url, true);
    xobj.onreadystatechange = function() {
        if (xobj.readyState == 4 && xobj.status == '200') {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

and the HTML-Stuff:

<pre><code id="code1"></code></pre>
<script>
    loadJSON("../v0.1/json/hans.json", function(resText){
        data_parsed = JSON.parse(resText);
        //data.age = 33;
        data_stringified = JSON.stringify(data_parsed);
        document.getElementById("code1").innerHTML = resText;
    })
</script>

You probably recognized another issue: I am displaying the resText , which I am not able to change once it's loaded. I would like to display either the JavaScript object ( data_parsed ) to let Hans age a bit, like in the comment, or the stringified object.

The main problem is, that the output on my web page is:

[object Object] for ...innerHTML = data_parsed

or

{"name":"Hans","age":12,"favorite food":"Spätzlepfanne","sibli (a long one liner) for ...innerHTML = data_stringified

I really want to be the information about Hans displayed like in that example: https://jsoneditoronline.org/#/

A nicely and cool looking field for code, where the JSON is being displayed and with the opportunity to change something.

My idea: something like "add line break after every ','" ... I don't know

I am open for better approaches. :) Thanks in advance!

Answer 1

First, when you are stringifying the data, you should use data_parsed rather than data . Also, JSON.stringify takes the third argument as the number of spaces you want while beautifying JSON and making a string that you can set to innerHTML .

You can check the below snippet.

data_parsed = JSON.parse(resText);
//data.age = 33;
data_stringified = JSON.stringify(data_parsed, null, 4);
document.getElementById("code1").innerHTML = data_stringified;

That should work.