web-dev-qa-db-fra.com

Afficher JSON en HTML

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

La coloration syntaxique serait un bonus.

Merci

htmljson
165
John Muchow

Vous pouvez utiliser la fonction JSON.stringify avec du JSON non formaté. Il le sort 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 dans un format lisible, vous pouvez utiliser le script Google Code Prettify comme suggéré par @A. Levy pour le code couleur.

Il convient d’ajouter que les navigateurs IE7 et antérieurs ne prennent pas en charge la méthode JSON.stringify .

134
John

Si vous l'affichez délibérément pour l'utilisateur final, enveloppez le texte JSON dans les balises <PRE> et <CODE>, 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, je voudrais utiliser JSON Viewer .

71
RedFilter

Pour la coloration syntaxique, utilisez code prettify . Je pense que c'est ce que StackOverflow utilise pour la mise en surbrillance du code.

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

La syntaxe JSON sera surlignée dans le format que vous avez défini 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 répondre à cela.

63
A. Levy

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.

38
Peter Örneholm

quelque chose comme ça ??

joli-json

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

échantillon en direct:

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

28
warfares

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

5
Janus Troelsen

Pourrait utiliser JSON2HTML pour le transformer en une liste HTML bien formatée. Peut-être un peu plus puissant que nécessaire

http://json2html.com

3
Chad

SyntaxHighlighter est un surligneur de syntaxe de code entièrement fonctionnel et développé en JavaScript. Pour avoir une idée de ce dont SyntaxHighlighter est capable, consultez la page démo .

1
themihai

Si vous souhaitez simplement le faire 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 actuellement en version bêta devrait prendre en charge cette fonctionnalité de manière native (un peu comme XML).

0
AvatarKava

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

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

0
Wayne Hartman

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

0
rfunduk