title: HTML: Loading JSON in <pre> and <code> element; adding line breaks
body: <p>I want to display the content of a json file on a web page nicely.
  That's how I do it:</p>
  
  <pre><code>{
    "name": "Hans",
    "age": 12,
    "favorite food": "Spätzlepfanne",
    "siblings": false
  }
  </code></pre>
  
  <p>(silly example ... I know :D)</p>
  
  <pre><code>function loadJSON(url, callback) {
      var xobj = new XMLHttpRequest();
      xobj.overrideMimeType('application/json');
      xobj.open('GET', url, true);
      xobj.onreadystatechange = function() {
          if (xobj.readyState == 4 &amp;&amp; xobj.status == '200') {
              callback(xobj.responseText);
          }
      };
      xobj.send(null);
  }
  </code></pre>
  
  <p>and the HTML-Stuff:</p>
  
  <pre><code>&lt;pre&gt;&lt;code id="code1"&gt;&lt;/code&gt;&lt;/pre&gt;
  &lt;script&gt;
      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;
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>You probably recognized another issue: I am displaying the <code>resText</code>, which I am not able to change once it's loaded. I would like to display either the JavaScript object (<code>data_parsed</code>) to let Hans age a bit, like in the comment, or the stringified object.</p>
  
  <p>The main problem is, that the output on my web page is:</p>
  
  <blockquote>
    <p>[object Object] for ...innerHTML = data_parsed</p>
  </blockquote>
  
  <p>or</p>
  
  <blockquote>
    <p>{"name":"Hans","age":12,"favorite food":"Spätzlepfanne","sibli
    (a long one liner) for ...innerHTML = data_stringified</p>
  </blockquote>
  
  <p>I really want to be the information about Hans displayed like in that example:
  <a href="https://jsoneditoronline.org/#/" rel="nofollow noreferrer">https://jsoneditoronline.org/#/</a></p>
  
  <p>A nicely and cool looking field for code, where the JSON is being displayed and with the opportunity to change something.</p>
  
  <p>My idea:
  something like "add line break after every ','" ... I don't know</p>
  
  <p>I am open for better approaches. :)  Thanks in advance!</p>