Visualizza JSON come HTML [chiuso]

178

Qualche consiglio su come incorporare JSON in una pagina HTML con JSON formattato in uno stile leggibile? Ad esempio, quando si visualizza XML in un browser, la maggior parte dei browser visualizza il formato XML (rientri, interruzioni di riga appropriate, ecc.). Vorrei lo stesso risultato finale per JSON.

L'evidenziazione della sintassi del colore sarebbe un vantaggio.

Grazie

html json

— John Muchow
fonte

tohtml.com/javaProperties ha funzionato bene per me; rende lo stile "in linea"; molto utile per il semplice copia e incolla in qualcos'altro.

— Andrew Bucklin,

Dai

— Mohsen,

147

È possibile utilizzare la funzione JSON.stringify con JSON non formattato. Lo emette in modo formattato.

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

Questo gira

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

in

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

Ora i dati sono in un formato leggibile, puoi utilizzare lo script Prettify di Google Code come suggerito da @A. Prelievo per colorarlo.

Vale la pena aggiungere che IE7 e i browser precedenti non supportano il metodo JSON.stringify .

— John
fonte

4

Per i browser che non supportano JSON.stringify (veniamo fuori e diciamolo, vecchio IE) c'è un eccellente polyfill che puoi usare per ottenere la funzionalità ( json.org/js.html ). Includilo e sarai coperto praticamente ovunque.

— John Munsch,

1

un altro trucco è che se metti una <br> invece del rientro (4), otterrai delle belle interruzioni di riga

— Jonathan

5

migliore risposta, fai il lavoro e non è necessario includere una libreria di terze parti.

— BlaShadow,

1

L'ho usato con grande efficacia per un caso d'uso in cui il JSON in formato umano doveva essere visualizzato in un elemento <textarea> HTML. Sembrava fare il lavoro semplicemente fantastico.

— CSSian,

1

Metti questo in <pre. e sei pronto, almeno per scopi di debug, quando non puoi usare console.log ()

— sparklos

94

Se lo stai visualizzando deliberatamente per l'utente finale, inserisci il testo JSON <PRE>e i <CODE>tag, ad esempio:

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

Altrimenti userei JSON Viewer .

— RedFilter
fonte

10

e se la stringa è tutta in una riga? come lo rende ben formattato in quel modo?

— geowa4,

2

Sei forte. Questa è la risposta più semplice a quella che è stata una domanda molto complessa: come stampare in modo carino python json in html. grazie.

— Marc Cenedella,

1

Non so come questo non abbia più voti. Soluzione semplice e facile.

— anthv123,

9

@ geowa4, JSON.stringify(jsonObj, null, ' ')lo abbellirà con 2 spazi. So che è tardi, ma ho pensato che questo suggerimento sarà utile.

— hIpPy

2

firefox avverte con: Il sito in anticipo potrebbe contenere programmi dannosi quando si accede a codeplex.com

— JRichardsz,

65

Per l'evidenziazione della sintassi, utilizzare il codice prettify . Credo che questo sia ciò che StackOverflow utilizza per evidenziare il suo codice.

Avvolgi il tuo JSON formattato in blocchi di codice e dai loro la classe "prettyprint".
Includi prettify.js nella tua pagina.
Assicurati che il tag del corpo del documento prettyPrint()venga chiamato quando viene caricato

Avrai evidenziato JSON nella sintassi nel formato che hai disposto nella tua pagina. Vedi qui per un esempio . Quindi se hai avuto un blocco di codice come questo:

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

Sarebbe così:

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

Questo non aiuta con il rientro, ma le altre risposte sembrano affrontarlo.

— A. Levy
fonte

1

Ora che tutti i repository di Google Code sono bloccati, dovremmo indirizzare i nuovi utenti direttamente al nuovo repository GitHub: https://github.com/google/code-prettify

— adelriosantiago,

Come puoi farlo funzionare all'interno del ritorno AJAX? Il codice non è presente al carico del corpo, ma solo dopo una chiamata Ajax.

— toddmo

@toddmo dovresti essere in grado di seguire i miei 3 passaggi nella funzione del gestore delle risposte per il ritorno AJAX. Quindi il gestore chiamerà prettyPrint invece del metodo body onLoad. Mi aspetto che dovrebbe funzionare.

— A. Levy,

La risposta di Janus Troelsen è arrivata e ha funzionato, quindi ci sono andato. Dovresti verificarlo per PHP-> HTML, così facile.

— toddmo

40

Penso che intendevi qualcosa del genere: visualizzazione JSON

Non so se potresti usarlo, ma potresti chiedere all'autore.

— Peter Örneholm
fonte

Irreale! Grande! Non so cosa dire ... grazie mille

— fdrv

Davvero un bel strumento!

— David Lilljegren,

29

qualcosa come questo ??

pretty-JSON

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

campione dal vivo:

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

— Warfares
fonte

5

Ecco una soluzione leggera, che fa solo ciò che ha chiesto OP, incluso l'evidenziazione ma nient'altro: come posso stampare in modo carino JSON usando JavaScript?

— Janus Troelsen
fonte

una funzione superiore, e non solo per me, se tutto ciò che vuoi fare è PHP -> HTML, ed ecco perché: è molto leggero, molto più semplice di Google da usare, molto più piccolo e non richiede fiducia in una mega azienda . Puoi effettivamente guardare il codice e capirlo.

— toddmo

3

Potrebbe usare JSON2HTML per trasformarlo in un elenco HTML ben formattato .. potrebbe essere un po 'più potente di quanto tu abbia realmente bisogno

http://json2html.com

— Chad
fonte

1

scusa sembra che il sito plug-in jquery sia andato ciao ciao .. prova json2html.com

— Chad Brown il

prova il mio: github.com/viscocent/JSON2HTML per problemi più semplici

— Viscocent,

ho pensato di aggiornarlo con lo strumento visualizer visualizer.json2html.com

— Chad Brown,

1

SyntaxHighlighter è un evidenziatore di sintassi autonomo completamente funzionale sviluppato in JavaScript. Per avere un'idea di cosa sia capace SyntaxHighlighter, dai un'occhiata allapagina demo .

— themihai
fonte

0

Se stai solo cercando di farlo dal punto di vista del debug, puoi utilizzare un plug-in di Firefox come JSONovich per visualizzare il contenuto JSON.

La nuova versione di Firefox che è attualmente in beta è prevista per supportare nativamente questo (molto simile a XML)

— AvatarKava
fonte

0

Ecco uno strumento javasript che convertirà JSON in XML e viceversa, che dovrebbe migliorare la sua leggibilità. È quindi possibile creare un foglio di stile per colorarlo o eseguire una trasformazione completa in HTML.

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

— Wayne Hartman
fonte

0

La tua scommessa migliore sarà utilizzare gli strumenti della tua lingua back-end per questo. Che lingua stai usando? Per Ruby, prova json_printer .

— rfunduk
fonte

-2

Per prima cosa prendi la stringa JSON e ne ricava oggetti reali . Effettua il ciclo di tutte le proprietà dell'oggetto, posizionando gli elementi in un elenco non ordinato. Ogni volta che arrivi a un nuovo oggetto, crea un nuovo elenco.

— geowa4
fonte