JSON als HTML anzeigen [geschlossen]

177

Gibt es Empfehlungen zum Einbetten von JSON in eine HTML-Seite, wobei JSON in einem für Menschen lesbaren Stil formatiert ist? Wenn Sie beispielsweise XML in einem Browser anzeigen, zeigen die meisten Browser das formatierte XML an (eingerückt, richtige Zeilenumbrüche usw.). Ich möchte das gleiche Endergebnis für JSON.

Das Hervorheben der Farbsyntax wäre ein Bonus.

Vielen Dank

html json John Muchow
quelle
tohtml.com/javaProperties hat bei mir gut funktioniert; es macht den Stil "inline"; Sehr hilfreich für das einfache Kopieren und Einfügen in etwas anderes.
Andrew Bucklin
Überprüfen Sie meine Bibliothek azimi.me/json-formatter-js
Mohsen

Antworten:

147

Sie können die Funktion JSON.stringify mit unformatiertem JSON verwenden. Es gibt es formatiert aus.

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

Das dreht sich

{ "foo": "sample", "bar": "sample" }

in

 {
     "foo": "sample", 
     "bar": "sample" 
 }

Jetzt sind die Daten in einem lesbaren Format, das Sie mit Google Code Prettify verwenden können von @A vorgeschlagene Skript verwenden. Abgabe, um es farblich zu kennzeichnen.

Es ist erwähnenswert, dass IE7 und ältere Browser die JSON.stringify-Methode nicht unterstützen .

John
quelle
4
Für Browser, die JSON.stringify nicht unterstützen (lassen Sie es uns einfach sagen, alter IE), gibt es eine hervorragende Polyfüllung, mit der Sie die Funktionalität erhalten können ( json.org/js.html ). Schließen Sie das einfach ein und Sie werden so ziemlich überall abgedeckt.
John Munsch
1
Ein weiterer Trick ist, wenn Sie anstelle des Einrückungsfeldes (4) ein <br> setzen, erhalten Sie schöne Zeilenumbrüche
Jonathan
5
Beste Antwort: Machen Sie den Job und müssen Sie keine Bibliothek von Drittanbietern einbinden.
BlaShadow
1
Ich habe dies mit großer Wirkung für einen Anwendungsfall verwendet, bei dem der vom Menschen formatierte JSON in einem HTML-Element <textarea> angezeigt werden musste. Schien den Job einfach toll zu machen.
CSSian
1
Geben Sie dies in <pre ein. und Sie sind zumindest für Debugging-Zwecke eingestellt, wenn Sie console.log () nicht verwenden können
sparklos
90

Wenn Sie es absichtlich für den Endbenutzer anzeigen, schließen Sie den JSON-Text <PRE>und die <CODE>Tags ein, z.

<html>
<body>
<pre>
<code>
[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

</code>
</pre>
</body>
</html>

Ansonsten würde ich JSON Viewer verwenden .

RedFilter
quelle
10
und was ist, wenn die Zeichenfolge alle in einer Zeile steht? Wie macht er es so schön formatiert?
Geowa4
2
Du rockst. Dies ist die einfachste Antwort auf eine sehr komplexe Frage - wie man Python JSON in HTML hübsch druckt. Danke.
Marc Cenedella
1
Ich weiß nicht, wie das nicht mehr positive Stimmen hat. Einfache, einfache Lösung.
Anthv123
9
@ geowa4, JSON.stringify(jsonObj, null, ' ')verschönert es mit 2 Leerzeichen. Ich weiß, dass dies spät ist, dachte aber, dass dieser Tipp hilfreich sein wird.
HPPy
2
Firefox warnt mit: Die Website vor Ihnen kann schädliche Programme enthalten, wenn Sie codeplex.com
JRichardsz
65

Verwenden Sie für die Syntaxhervorhebung den Code prettify . Ich glaube, das ist es, was StackOverflow für die Code-Hervorhebung verwendet.

  1. Wickeln Sie Ihren formatierten JSON in Codeblöcke und geben Sie ihnen die Klasse "Prettyprint".
  2. Fügen Sie prettify.js in Ihre Seite ein.
  3. Stellen Sie sicher, dass das Body-Tag Ihres Dokuments beim Laden prettyPrint()aufgerufen wird

In der Syntax wird JSON in dem Format hervorgehoben, das Sie auf Ihrer Seite festgelegt haben. Siehe hier für ein Beispiel . Wenn Sie also einen Codeblock wie diesen hatten:

<code class="prettyprint">
    var jsonObj = {
        "height" : 6.2,
        "width" : 7.3,
        "length" : 9.1,
        "color" : {
            "r" : 255,
            "g" : 200,
            "b" : 10
        }
    }
</code>

Es würde so aussehen:

var jsonObj = {
    "height" : 6.2,
    "width" : 7.3,
    "length" : 9.1,
    "color" : {
        "r" : 255,
        "g" : 200,
        "b" : 10
    }
}

Dies hilft beim Einrücken nicht, aber die anderen Antworten scheinen sich damit zu befassen.

A. Levy
quelle
1
Nachdem alle Google Code-Repositorys eingefroren sind, sollten wir neue Benutzer direkt auf das neue GitHub-Repo
verweisen
Wie können Sie dies innerhalb von AJAX return zum Laufen bringen? Der Code ist bei Körperlast nicht vorhanden, sondern erst nach einem Ajax-Aufruf.
Toddmo
@toddmo Sie sollten in der Lage sein, meine 3 Schritte in der Response-Handler-Funktion für die AJAX-Rückgabe zu befolgen. Der Handler ruft also hübschPrint anstelle der body onLoad-Methode auf. Ich gehe davon aus, dass das funktionieren sollte.
A. Levy
Janus Troelsens Antwort fiel ein und funktionierte einfach, also ging ich damit um. Sie sollten es für PHP-> HTML auschecken, so einfach.
Toddmo
40

Ich denke, Sie haben so etwas gemeint: JSON-Visualisierung

Ich weiß nicht, ob Sie es verwenden könnten, aber Sie könnten den Autor fragen.

Peter Örneholm
quelle
Unwirklich! Toll! Ich weiß nicht, was ich sagen soll ... vielen Dank
fdrv
Wirklich ein schönes Werkzeug!
David Lilljegren
5

Hier ist eine leichte Lösung, die nur das tut, was OP verlangt, einschließlich Hervorheben, aber sonst nichts: Wie kann ich JSON mit JavaScript hübsch drucken?

Janus Troelsen
quelle
Eine überlegene Funktion, und nicht nur für mich, wenn Sie nur PHP -> HTML verwenden möchten, und hier ist der Grund: Es ist sehr leicht, viel einfacher als Google zu verwenden, viel kleiner und erfordert kein Vertrauen in ein Mega-Unternehmen . Sie können sich den Code tatsächlich ansehen und ihn verstehen.
Toddmo
3

Könnte JSON2HTML verwenden, um es in eine schön formatierte HTML-Liste umzuwandeln. Möglicherweise ist es etwas leistungsfähiger, als Sie wirklich benötigen

http://json2html.com

Tschad
quelle
1
Entschuldigung, es sieht so aus, als wäre die jquery-Plug-in-Site auf Wiedersehen verschwunden. Versuchen Sie es mit json2html.com
Chad Brown
versuchen Sie meins: github.com/viscocent/JSON2HTML für einfachere Probleme
Viscocent
Ich dachte, ich würde dies mit dem Visualizer-Tool visualizer.json2html.com
Chad Brown
1

SyntaxHighlighter ist ein voll funktionsfähiger, in sich geschlossener Code-Syntax- Textmarker, der in JavaScript entwickelt wurde. Um eine Vorstellung davonbekommenwas Syntax istLage, einen Blick auf die Demo - Seite.

themihai
quelle
0

Wenn Sie dies nur unter Debugging-Gesichtspunkten tun möchten , können Sie den JSON-Inhalt mit einem Firefox-Plugin wie JSONovich anzeigen.

Die neue Version von Firefox, die sich derzeit in der Beta befindet, soll dies nativ unterstützen (ähnlich wie XML).

AvatarKava
quelle
0

Am besten verwenden Sie dazu die Tools Ihrer Back-End-Sprache. Welche Sprache benutzt du? Versuchen Sie für Ruby json_printer .

rfunduk
quelle
-2

Nehmen Sie zuerst den JSON-String und machen Sie daraus echte Objekte . Durchlaufen Sie alle Eigenschaften des Objekts und platzieren Sie die Elemente in einer ungeordneten Liste. Erstellen Sie jedes Mal, wenn Sie zu einem neuen Objekt gelangen, eine neue Liste.

geowa4
quelle