Afficher JSON au format HTML [fermé]

178

Des recommandations sur la façon d'intégrer JSON dans une page HTML avec le JSON formaté dans un style lisible par l'homme? Par exemple, lorsque vous affichez du XML dans un navigateur, la plupart des navigateurs affichent le format XML (en retrait, sauts de ligne appropriés, etc.). J'aimerais le même résultat final pour JSON.

La coloration syntaxique des couleurs serait un bonus.

Merci

html json

— John Muchow
source

tohtml.com/javaProperties a bien fonctionné pour moi; cela rend le style "en ligne"; très utile pour un simple copier-coller dans autre chose.

— Andrew Bucklin

Découvrez ma bibliothèque azimi.me/json-formatter-js

— Mohsen

147

Vous pouvez utiliser la fonction JSON.stringify avec JSON non formaté. Il le produit de manière formatée.

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

Cela tourne

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

dans

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

Maintenant, les données sont un format lisible, vous pouvez utiliser le script Google Code Prettify comme suggéré par @A. Taxe pour le coder en couleur.

Il convient d'ajouter que IE7 et les navigateurs plus anciens ne prennent pas en charge la méthode JSON.stringify .

— John
source

4

Pour les navigateurs qui ne prennent pas en charge JSON.stringify (disons-le simplement, ancien IE), il existe un excellent polyfill que vous pouvez utiliser pour obtenir la fonctionnalité ( json.org/js.html ). Incluez simplement cela et vous serez couvert à peu près partout.

— John Munsch

1

une autre astuce est que si vous mettez un <br> au lieu du champ de retrait (4), vous obtiendrez de jolis sauts de ligne

— Jonathan

5

meilleure réponse, faites le travail et pas besoin d'inclure une bibliothèque tierce.

— BlaShadow le

1

J'ai utilisé cela à bon escient pour un cas d'utilisation où le JSON formaté humain devait être affiché dans un élément HTML <textarea>. Semblait faire le travail tout simplement génial.

— CSSian

1

Mettez ceci dans <pre. et vous êtes prêt, au moins à des fins de débogage, lorsque vous ne pouvez pas utiliser console.log ()

— sparklos

94

Si vous l'affichez délibérément pour l'utilisateur final, enveloppez le texte JSON <PRE>et les <CODE>balises, par exemple:

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

Sinon, j'utiliserais JSON Viewer .

— RedFilter
source

10

et que faire si la chaîne est en une seule ligne? comment le fait-il bien formaté comme ça?

— geowa4

2

Tu gères. C'est la réponse la plus simple à ce qui a été une question très complexe - comment joliment imprimer python json en html. Merci.

— Marc Cenedella

1

Je ne sais pas comment cela n'a pas plus de votes positifs. Solution simple et facile.

— anthv123

9

@ geowa4, JSON.stringify(jsonObj, null, ' ')l'embellira avec 2 espaces. Je sais que c'est tard, mais j'ai pensé que cette astuce serait utile.

— hIpPy

2

Firefox met en garde avec: Le site à venir peut contenir des programmes nuisibles lorsque vous entrez sur codeplex.com

— JRichardsz

65

Pour la coloration syntaxique, utilisez le code prettify . Je crois que c'est ce que StackOverflow utilise pour sa mise en évidence de code.

Enveloppez votre JSON formaté dans des blocs de code et donnez-leur la classe "prettyprint".
Incluez prettify.js dans votre page.
Assurez-vous que la balise de corps de votre document appelle prettyPrint()lors de son chargement

Vous aurez la syntaxe JSON en surbrillance dans le format que vous avez présenté dans votre page. Voir ici pour un exemple . Donc, si vous aviez un bloc de code comme celui-ci:

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

Cela ressemblerait à ceci:

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

Cela n'aide pas avec l'indentation, mais les autres réponses semblent y remédier.

— A. Levy
source

1

Maintenant que tous les référentiels Google Code sont gelés, nous devrions pointer les nouveaux utilisateurs directement vers le nouveau référentiel GitHub: https://github.com/google/code-prettify

— adelriosantiago

Comment pouvez-vous faire fonctionner cela dans le retour AJAX? Le code n'est pas là à la charge du corps, mais seulement après un appel ajax.

— toddmo

@toddmo vous devriez pouvoir suivre mes 3 étapes dans la fonction de gestionnaire de réponse pour le retour AJAX. Ainsi, le gestionnaire appellera prettyPrint au lieu de la méthode onLoad du corps. Je m'attends à ce que cela fonctionne.

— A. Levy

La réponse de Janus Troelsen est tombée et a tout simplement fonctionné, alors j'ai accepté. Vous devriez le vérifier pour PHP-> HTML, si facile.

— toddmo

40

Je pense que vous vouliez dire quelque chose comme ceci: Visualisation JSON

Je ne sais pas si vous pourriez l'utiliser, mais vous pourriez demander à l'auteur.

— Peter Örneholm
source

Irréel! Génial! Je ne sais pas quoi dire ... merci beaucoup

— fdrv

Vraiment un bel outil!

— David Lilljegren

29

quelque chose comme ça ??

jolie-json

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

échantillon en direct:

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

— guerre
source

5

Voici une solution légère, ne faisant que ce que OP a demandé, y compris la mise en évidence, mais rien d'autre: Comment puis-je imprimer JSON en utilisant JavaScript?

— Janus Troelsen
source

une fonction supérieure, et pas seulement pour moi, si tout ce que vous voulez faire est PHP -> HTML, et voici pourquoi: c'est très léger, beaucoup plus simple que Google à utiliser, beaucoup plus petit et ne nécessite pas de faire confiance à une méga société . Vous pouvez en fait regarder le code et le comprendre.

— toddmo

3

Pourrait utiliser JSON2HTML pour le transformer en une liste HTML bien formatée ... peut-être un peu plus puissant que ce dont vous avez vraiment besoin

http://json2html.com

— Tchad
source

1

désolé, on dirait que le site du plug-in jquery est parti bye-bye .. essayez json2html.com

— Chad Brown

essayez le mien: github.com/viscocent/JSON2HTML pour des problèmes plus simples

— Viscocent

figuré que je mettrais à jour cela avec l'outil de visualisation visualizer.json2html.com

— Chad Brown

1

SyntaxHighlighter est un surligneur de syntaxe de code autonome entièrement fonctionnel développé en JavaScript. Pour avoir une idée de ce dont SyntaxHighlighter est capable, jetez un œil à lapage de démonstration .

— themihai
source

0

Si vous cherchez simplement à faire cela du point de vue du débogage, vous pouvez utiliser un plugin Firefox tel que JSONovich pour afficher le contenu JSON.

La nouvelle version de Firefox qui est actuellement en version bêta devrait prendre en charge cela de manière native (un peu comme XML)

— AvatarKava
source

0

Voici un outil javasript qui convertira JSON en XML et vice versa, ce qui devrait améliorer sa lisibilité. Vous pouvez ensuite créer une feuille de style pour la colorer ou effectuer une transformation complète en HTML.

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

— Wayne Hartman
source

0

Votre meilleur pari sera d'utiliser les outils de votre langage back-end pour cela. Quelle langue utilisez-vous? Pour Ruby, essayez json_printer .

— rfunduk
source

-2

Commencez par prendre la chaîne JSON et en faire de vrais objets . Faites une boucle sur toutes les propriétés de l'objet, en plaçant les éléments dans une liste non ordonnée. Chaque fois que vous arrivez à un nouvel objet, créez une nouvelle liste.

— geowa4
source