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

Réponses:

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

  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 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
la 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
la source
Irréel! Génial! Je ne sais pas quoi dire ... merci beaucoup
fdrv
Vraiment un bel outil!
David Lilljegren
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
la 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
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
la 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
la 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
la 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
la source