Wyświetlaj JSON jako HTML [zamknięte]

178

Jakieś zalecenia dotyczące osadzania JSON na stronie HTML z JSON sformatowanym w stylu czytelnym dla człowieka? Na przykład, kiedy przeglądasz XML w przeglądarce, większość przeglądarek wyświetla format XML (wcięcia, właściwe podziały wierszy itp.). Chciałbym uzyskać taki sam wynik końcowy dla JSON.

Podświetlanie składni kolorów byłoby dodatkowym atutem.

Dzięki

html json John Muchow
źródło
Tohtml.com/javaProperties działało dobrze dla mnie; sprawia, że ​​styl jest „wbudowany”; bardzo pomocne przy prostym kopiowaniu i wklejaniu do czegoś innego.
Andrew Bucklin
Sprawdź moją bibliotekę azimi.me/json-formatter-js
Mohsen

Odpowiedzi:

147

Możesz użyć funkcji JSON.stringify z niesformatowanym kodem JSON. Wyprowadza go w sformatowany sposób.

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

To się zmienia

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

w

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

Teraz dane są w czytelnym formacie, możesz użyć skryptu Google Code Prettify zgodnie z sugestią @A. Levy, aby oznaczyć to kolorem.

Warto dodać, że IE7 i starsze przeglądarki nie obsługują metody JSON.stringify .

Jan
źródło
4
W przypadku przeglądarek, które nie obsługują JSON.stringify (wyjdźmy i powiedzmy to, stary IE) istnieje doskonały polyfill, którego można użyć, aby uzyskać tę funkcjonalność ( json.org/js.html ). Po prostu to uwzględnij, a będziesz objęty prawie wszędzie.
John Munsch,
1
inna sztuczka polega na tym, że jeśli zamiast pola wcięcia (4) wstawisz znak <br>, otrzymasz ładne podziały wierszy
Jonathan,
5
najlepsza odpowiedź, wykonaj pracę i nie musisz dołączać biblioteki zewnętrznej.
BlaShadow
1
Użyłem tego ze świetnym efektem w przypadku użycia, w którym sformatowany przez człowieka JSON musiał być wyświetlany w elemencie HTML <textarea>. Wydawało się, że spisuje się świetnie.
CSSian
1
Umieść to <pre. i jesteś ustawiony, przynajmniej do celów debugowania, kiedy nie możesz używać console.log ()
sparklos
94

Jeśli celowo wyświetlasz go użytkownikowi końcowemu, zawiń tekst JSON <PRE>i <CODE>tagi, np .:

<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>

W przeciwnym razie użyłbym przeglądarki JSON .

RedFilter
źródło
10
a co, jeśli cały ciąg jest w jednej linii? jak ma to ładnie sformatować w ten sposób?
geowa4
2
Rządzisz. To najprostsza odpowiedź na bardzo złożone pytanie - jak ładnie wydrukować python json w html. Dziękuję Ci.
Marc Cenedella,
1
Nie wiem, jak to nie ma więcej głosów za. Proste, łatwe rozwiązanie.
anthv123
9
@ geowa4, JSON.stringify(jsonObj, null, ' ')upiększy go dwoma spacjami. Wiem, że to późno, ale pomyślałem, że ta wskazówka będzie pomocna.
hIpPy
2
firefox ostrzega: Strona przed tobą może zawierać szkodliwe programy, gdy wejdziesz na codeplex.com
JRichardsz
65

Do podświetlania składni użyj prettify kodu . Uważam, że właśnie tego używa StackOverflow do podświetlania kodu.

  1. Opakuj sformatowany JSON w bloki kodu i nadaj im klasę „prettyprint”.
  2. Uwzględnij prettify.js na swojej stronie.
  3. Upewnij się, że tag body twojego dokumentu jest wywoływany prettyPrint()podczas ładowania

Będziesz mieć podświetloną składnię JSON w formacie, który określiłeś na swojej stronie. Zobacz tutaj przykład . Więc gdybyś miał taki blok kodu:

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

Wyglądałoby to tak:

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

To nie pomaga w tworzeniu wcięć, ale wydaje się , że inne odpowiedzi dotyczą tego.

A. Levy
źródło
1
Teraz, gdy wszystkie repozytoria Google Code są zamrożone, powinniśmy kierować nowych użytkowników bezpośrednio do nowego repozytorium GitHub: https://github.com/google/code-prettify
adelriosantiago
Jak sprawić, by to działało w ramach zwrotu AJAX? Kod nie występuje podczas ładowania treści, ale tylko po wywołaniu Ajax.
toddmo
@toddmo powinieneś być w stanie wykonać moje 3 kroki w funkcji obsługi odpowiedzi dla zwrotu AJAX. Zatem program obsługi wywoła prettyPrint zamiast metody body onLoad. Spodziewam się, że to zadziała.
A. Levy
Odpowiedź Janusa Troelsena pojawiła się i po prostu zadziałała, więc poszedłem z tym. Powinieneś to sprawdzić pod kątem PHP-> HTML, to takie proste.
toddmo,
40

Myślę, że miałeś na myśli coś takiego: wizualizacja JSON

Nie wiem, czy możesz go użyć, ale możesz zapytać autora.

Peter Örneholm
źródło
Nierealny! Wspaniały! Nie wiem, co powiedzieć ... bardzo dziękuję
fdrv
Naprawdę fajne narzędzie!
David Lilljegren
5

Oto lekkie rozwiązanie, robiące tylko to, o co prosił OP, w tym podświetlanie, ale nic więcej: Jak mogę ładnie wydrukować JSON za pomocą JavaScript?

Janus Troelsen
źródło
doskonała funkcja, nie tylko dla mnie, jeśli wszystko, co chcesz zrobić, to PHP -> HTML, a oto dlaczego: Jest bardzo lekki, o wiele prostszy w użyciu niż Google, znacznie mniejszy i nie wymaga zaufania do mega firmy . Możesz faktycznie spojrzeć na kod i go zrozumieć.
toddmo,
3

Przydałby się JSON2HTML, aby przekształcić ją w ładnie sformatowaną listę HTML .. może być jednak trochę bardziej wydajna niż naprawdę potrzebujesz

http://json2html.com

Czad
źródło
1
przepraszam, wygląda na to, że strona z wtyczką jquery zniknęła, żegnaj ... spróbuj json2html.com
Chad Brown
wypróbuj mój: github.com/viscocent/JSON2HTML dla prostszych problemów
Viscocent Kwietnia
pomyślałem, że zaktualizuję to za pomocą narzędzia wizualizatora visualizer.json2html.com
Chad Brown
1

SyntaxHighlighter to w pełni funkcjonalny samodzielny podświetlacz składni kodu opracowany w języku JavaScript. Aby dowiedzieć się, do czego jest zdolny SyntaxHighlighter, zajrzyj nastronę demonstracyjną .

themihai
źródło
0

Jeśli chcesz to zrobić tylko z punktu widzenia debugowania, możesz użyć wtyczki Firefox, takiej jak JSONovich, do wyświetlenia zawartości JSON.

Nowa wersja Firefoksa, która jest obecnie w fazie beta, ma to natywnie obsługiwać (podobnie jak XML)

AvatarKava
źródło
0

Najlepiej będzie użyć do tego narzędzi języka zaplecza. Jakiego języka używasz? W przypadku Rubiego wypróbuj json_printer .

rfunduk
źródło
-2

Najpierw weź ciąg JSON i utwórz z niego prawdziwe obiekty . Zapętlaj wszystkie właściwości obiektu, umieszczając elementy na nieuporządkowanej liście. Za każdym razem, gdy dotrzesz do nowego obiektu, zrób nową listę.

geowa4
źródło