wake-up-neo.com

JSON.stringify-Ausgabe auf ziemlich druckbare Weise in div

Ich JSON.stringify ein Json-Objekt von 

result = JSON.stringify(message, my_json, 2)

Der 2 im obigen Argument soll das Ergebnis ziemlich gut ausdrücken. Es tut dies, wenn ich etwas wie alert(result) mache. Ich möchte dies jedoch an den Benutzer ausgeben, indem ich es in einem div anhebe. Wenn ich das tue, bekomme ich nur eine einzige Zeile. (Ich glaube nicht, dass es funktioniert, weil die Unterbrechungen und Leerzeichen nicht als HTML interpretiert werden?)

{ "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 }

Gibt es eine Möglichkeit, das Ergebnis von JSON.stringify in einem Div auf eine hübsche Druckweise auszugeben?

javascripthtmljsonpretty-printstringify
107
Alexis

Bitte verwenden Sie ein <pre>-Tag 

demo: http://jsfiddle.net/K83cK/ 

var data = {
  "data": {
    "x": "1",
    "y": "1",
    "url": "http://url.com"
  },
  "event": "start",
  "show": 1,
  "id": 50
}


document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);
<pre id="json"></pre>

291
Diode

Stellen Sie sicher, dass sich die JSON-Ausgabe in einem <pre>-Tag befindet.

19
Adam

Vollständige Offenlegung Ich bin der Autor dieses Pakets, aber eine andere Möglichkeit, JSON- oder JavaScript-Objekte lesbar auszugeben, einschließlich der Möglichkeit, Teile zu überspringen, zu reduzieren usw. ist nodedump, https://github.com/ragamufin/nodedump

6
ragamufin

Wenn dies wirklich für einen Benutzer ist, ist es besser als nur Text auszugeben. Sie können eine Bibliothek wie diese https://github.com/padolsey/prettyprint.js verwenden, um sie als HTML-Tabelle auszugeben.

2
Jason Livesay

Beachten Sie, dass Ihre REST - API zurückgegeben wird: 

{"Intent":{"Command":"search","SubIntent":null}}

Dann können Sie Folgendes tun, um es in einem Nice-Format zu drucken:

<pre id="ciResponseText">Output will de displayed here.</pre>   

var ciResponseText = document.getElementById('ciResponseText');
var obj = JSON.parse(http.response);
ciResponseText.innerHTML = JSON.stringify(obj, undefined, 2);
2
Siddarth Kanted

Wenn Ihr <pre> -Tag eine einzelne Zeile von JSON anzeigt, weil der String auf diese Weise bereits bereitgestellt wird (über eine API oder eine Funktion/Seite außerhalb Ihrer Kontrolle), können Sie ihn folgendermaßen neu formatieren:

HTML:

<pre id="json">{"some":"JSON string"}</pre>

JavaScript:

    (function() {
        var element = document.getElementById("json");
        var obj = JSON.parse(element.innerText);
        element.innerHTML = JSON.stringify(obj, undefined, 2);
    })();

oder jQuery:

    $(formatJson);

    function formatJson() {
        var element = $("#json");
        var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
    }
1
thinkOfaNumber

drucken Sie den Status einer Komponente mit JSX

render() {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <pre>
        <code>{JSON.stringify(this.state, null, 4)}</code>
      </pre>
    </div>
  );
}

stringify

0
Bar Horing

sie können dieses Repository ausprobieren: https://github.com/amelki/json-pretty-html

0
kofifus

use style white-space: pre Das <pre>-Tag ändert auch das Textformat, was unerwünscht sein kann.

0
user7986267

Mein Vorschlag basiert auf:

  • ersetzen Sie jedes "\ n" (Zeilenumbruch) durch ein <br>
  • ersetzen Sie jedes Leerzeichen durch & nbsp;

var x = { "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };


document.querySelector('#newquote').innerHTML = JSON.stringify(x, null, 6)
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });
<div id="newquote"></div>

0
gaetanoM