wake-up-neo.com

So zeigen Sie JSON-Rohdaten auf einer HTML-Seite an

Mögliches Duplizieren:
Hübscher JSON-Druck mit JavaScript

Ich möchte meine rohen JSON-Daten genauso wie JSONview auf einer HTML-Seite anzeigen. Meine Rohdaten sind beispielsweise:

  {
   "hey":"guy",
   "anumber":243,
   "anobject":{
      "whoa":"nuts",
      "anarray":[
         1,
         2,
         "thr<h1>ee"
      ],
      "more":"stuff"
   },
   "awesome":true,
   "bogus":false,
   "meaning":null,
   "japanese":"明日がある。",
   "link":"http://jsonview.com",
   "notLink":"http://jsonview.com is great"
}

Es kommt von http://jsonview.com/ und was ich erreichen möchte, ist http://jsonview.com/example.json , wenn Sie Chrome verwenden und installiert haben das JSONView-Plugin.

Ich habe es versucht, aber nicht verstanden, wie es funktioniert. Ich möchte ein JS-Skript (CSS zum Hervorheben) verwenden, um meine rohen JSON-Daten, die von ajax abgerufen werden, benutzerdefiniert zu formatieren und schließlich auf einer HTML-Seite an einer beliebigen Stelle wie in einem div-Element abzulegen. Gibt es bereits vorhandene JS-Bibliotheken, die dies erreichen können? Oder wie geht das? 

javascriptjqueryhtmlcssjson
20
timon.ma

Ich denke, alles, was Sie brauchen, um die Daten auf einer HTML-Seite anzuzeigen, ist JSON.stringify .

Wenn Ihr JSON beispielsweise so gespeichert ist:

var jsonVar = {
        text: "example",
        number: 1
    };

Dann müssen Sie dies nur tun, um es in einen String zu konvertieren:

var jsonStr = JSON.stringify(jsonVar);

Und dann können Sie direkt in Ihren HTML-Code einfügen, zum Beispiel:

document.body.innerHTML = jsonStr;

Natürlich möchten Sie body wahrscheinlich durch getElementById durch ein anderes Element ersetzen.

Was den CSS-Teil Ihrer Frage angeht, können Sie RegExp verwenden, um das stringifizierte Objekt zu bearbeiten, bevor Sie es in das DOM einfügen. Beispielsweise sollte dieser Code ( auch zu Demonstrationszwecken auf JSFiddle ) für das Einrücken von geschweiften Klammern sorgen.

var jsonVar = {
        text: "example",
        number: 1,
        obj: {
            "more text": "another example"
        },
        obj2: {
             "yet more text": "yet another example"
        }
    }, // THE RAW OBJECT
    jsonStr = JSON.stringify(jsonVar),  // THE OBJECT STRINGIFIED
    regeStr = '', // A EMPTY STRING TO EVENTUALLY HOLD THE FORMATTED STRINGIFIED OBJECT
    f = {
            brace: 0
        }; // AN OBJECT FOR TRACKING INCREMENTS/DECREMENTS,
           // IN PARTICULAR CURLY BRACES (OTHER PROPERTIES COULD BE ADDED)

regeStr = jsonStr.replace(/({|}[,]*|[^{}:]+:[^{}:,]*[,{]*)/g, function (m, p1) {
var rtnFn = function() {
        return '<div style="text-indent: ' + (f['brace'] * 20) + 'px;">' + p1 + '</div>';
    },
    rtnStr = 0;
    if (p1.lastIndexOf('{') === (p1.length - 1)) {
        rtnStr = rtnFn();
        f['brace'] += 1;
    } else if (p1.indexOf('}') === 0) {
         f['brace'] -= 1;
        rtnStr = rtnFn();
    } else {
        rtnStr = rtnFn();
    }
    return rtnStr;
});

document.body.innerHTML += regeStr; // appends the result to the body of the HTML document

Dieser Code sucht einfach nach Abschnitten des Objekts in der Zeichenfolge und teilt sie in divs auf (obwohl Sie den HTML-Teil davon ändern könnten). Jedes Mal, wenn es auf eine geschweifte Klammer trifft, wird der Einzug jedoch inkrementiert oder verkleinert, je nachdem, ob es sich um eine öffnende Klammer oder um ein Schließen handelt (Verhalten ähnlich wie das space - Argument von 'JSON.stringify' ) . Sie können dies jedoch als Grundlage für verschiedene Arten der Formatierung verwenden.

30
guypursey

Beachten Sie, dass der von Ihnen bereitgestellte Link keine HTML-Seite ist, sondern ein JSON-Dokument. Die Formatierung erfolgt durch den Browser.

Sie müssen entscheiden, ob:

  1. Sie möchten den rohen JSON-Code (keine HTML-Seite) wie in Ihrem Beispiel anzeigen
  2. Zeigt eine HTML-Seite mit formatiertem JSON an

Wenn Sie 1. Ihrer Anwendung einen Antwort-Body mit JSON rendern möchten, legen Sie den MIME-Typ (application/json) fest usw. In diesem Fall erfolgt die Formatierung durch den Browser (und/oder die Browser-Plugins) )

Wenn dies der Fall ist, müssen Sie eine einfache minimale HTML-Seite mit JSON rendern, auf der Sie sie auf verschiedene Weise hervorheben können:

  • serverseitig, abhängig von Ihrem Stack. Für fast jede Sprache gibt es Lösungen
  • clientseitig mit Javascript-Highlight-Bibliotheken. 

Wenn Sie weitere Details zu Ihrem Stack angeben, ist es einfacher, Beispiele oder Ressourcen bereitzustellen.

BEARBEITEN: Für die JS-Hervorhebung auf Clientseite können Sie beispielsweise higlight.js versuchen. 

6
Rui Vieira

JSON in einem beliebigen HTML-Tag mit Ausnahme des <script>-Tags wäre lediglich Text. Es ist also so, als würden Sie Ihrer HTML-Seite eine Story hinzufügen.

Bei der Formatierung ist das jedoch eine andere Sache. Ich denke, Sie sollten den Titel Ihrer Frage ändern.

Schauen Sie sich die Frage this an. Siehe auch Seite this .

0
Saeed Neamati