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

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.

Opakuj sformatowany JSON w bloki kodu i nadaj im klasę „prettyprint”.
Uwzględnij prettify.js na swojej stronie.
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

29

coś takiego ??

pretty-json

https://github.com/warfares/pretty-json

próbka na żywo:

http://warfares.github.com/pretty-json/

— wojny
źródło

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

Oto narzędzie javasript, które konwertuje JSON na XML i odwrotnie, co powinno poprawić jego czytelność. Następnie możesz utworzyć arkusz stylów, aby go pokolorować lub wykonać pełną transformację do HTML.

http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html

— Wayne Hartman
ź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