So zeigen Sie rohe JSON-Daten auf einer HTML-Seite an [duplicate]

Mögliches Duplikat:

JSON-schöner Druck mit JavaScript

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

  {
   "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 wie http://jsonview.com/example.json wenn Sie Chrome verwenden und das JSONView-Plugin installiert haben.

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, individuell zu formatieren und sie schließlich an einer beliebigen Position wie in einem Div-Element auf einer HTML-Seite abzulegen. Gibt es vorhandene JS-Bibliotheken, die dies erreichen können? Oder wie geht das?

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 brauchen Sie nur dies zu tun, um es in einen String umzuwandeln:

var jsonStr = JSON.stringify(jsonVar);

Und dann können Sie zum Beispiel direkt in Ihr HTML einfügen:

document.body.innerHTML = jsonStr;

Natürlich werden Sie wahrscheinlich ersetzen wollen body mit einem anderen Element via getElementById.

Was den CSS-Teil Ihrer Frage betrifft, könnten Sie RegExp verwenden, um das stringifizierte Objekt zu manipulieren, bevor Sie es in das DOM einfügen. Zum Beispiel dieser Code (auch auf JSFiddle zu Demonstrationszwecken) sollte sich um das Einrücken von geschweiften Klammern kümmern.

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 innerhalb der Zeichenfolge und trennt sie in Divs (obwohl Sie den HTML-Teil davon ändern könnten). Jedes Mal, wenn es auf eine geschweifte Klammer trifft, wird jedoch die Einrückung erhöht oder verringert, je nachdem, ob es sich um eine öffnende oder eine schließende Klammer handelt (Verhalten ähnlich wie bei das Platz Argument von ‘JSON.stringify’). Aber Sie könnten dies als Grundlage für verschiedene Arten der Formatierung verwenden.

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

Sie müssen entscheiden, ob:

1. Sie möchten wie in Ihrem Beispiel das rohe JSON (keine HTML-Seite) anzeigen
2. Zeigen Sie eine HTML-Seite mit formatiertem JSON an

Wenn Sie 1. möchten, teilen Sie Ihrer Anwendung einfach mit, einen Antworttext mit JSON zu rendern, den MIME-Typ (application/json) festzulegen usw. In diesem Fall wird die Formatierung vom Browser (und/oder Browser-Plugins) übernommen.

Wenn 2., geht es darum, eine einfache minimale HTML-Seite mit dem JSON zu rendern, wo Sie sie auf verschiedene Arten hervorheben können:

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

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

BEARBEITEN: Für die clientseitige JS-Hervorhebung können Sie es versuchen Highlight.jszum Beispiel.

JSON in jedem HTML-Tag außer <script> Tag wäre ein bloßer Text. Es ist also so, als würden Sie Ihrer HTML-Seite eine Geschichte hinzufügen.

Aber was die Formatierung angeht, das ist eine andere Sache. Ich denke, Sie sollten den Titel Ihrer Frage ändern.

Sehen Sie sich diese Frage an. Siehe auch Dies Seite.