Avez-vous des recommandations sur la façon d'incorporer du JSON dans une page HTML en veillant à ce que le JSON soit formaté dans un style lisible par l'homme ? Par exemple, lorsque vous affichez du XML dans un navigateur, la plupart des navigateurs affichent le XML formaté (indentation, sauts de ligne appropriés, etc.). J'aimerais obtenir le même résultat pour JSON.
La coloration de la syntaxe serait un plus.
Merci
Vous pouvez utiliser la fonction JSON.stringify avec du JSON non formaté. Elle le restitue de manière formatée.
JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)Cela tourne
{ "foo": "sample", "bar": "sample" }en
{
"foo": "sample",
"bar": "sample"
}Maintenant que les données sont dans un format lisible, vous pouvez utiliser la fonction Google Code Prettify script comme suggéré par @A. Levy pour le code couleur.
Il convient d'ajouter que IE7 et les navigateurs plus anciens ne supportent pas la méthode JSON.stringify .
Pour les navigateurs qui ne prennent pas en charge JSON.stringify (disons-le tout net, le vieil IE), il existe un excellent polyfill que vous pouvez utiliser pour obtenir la fonctionnalité ( json.org/js.html ). Il suffit d'inclure cela et vous serez couvert à peu près partout.
Une autre astuce consiste à mettre un <br>à la place du champ d'indentation (4), vous obtiendrez de jolis sauts de ligne.
Si vous l'affichez délibérément pour l'utilisateur final, enveloppez le texte JSON dans <PRE> y <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 Visualisateur JSON .
Et que se passe-t-il si la chaîne de caractères est sur une seule ligne ? comment fait-il pour qu'elle soit joliment formatée comme ça ?
Tu es génial. C'est la réponse la plus simple à ce qui a été une question très complexe -- comment imprimer joliment python json en html. merci.
Pour la coloration syntaxique, utilisez code Prettify . Je crois que c'est ce que StackOverflow utilise pour sa mise en évidence du code.
prettyPrint() lorsqu'il est chargéVous aurez la syntaxe JSON en surbrillance 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 la autres réponses semblent s'attaquer à ce problème.
Maintenant que tous les dépôts de Google Code sont gelés, nous devrions diriger les nouveaux utilisateurs directement vers le nouveau dépôt GitHub : https://github.com/google/code-prettify
Comment faire pour que cela fonctionne dans le cadre d'un retour AJAX ? Le code n'est pas présent au chargement du corps, mais seulement après l'appel ajax.
@toddmo vous devriez pouvoir suivre mes 3 étapes dans la fonction du gestionnaire de réponse pour le retour AJAX. Ainsi, le gestionnaire appellera prettyPrint au lieu de la méthode body onLoad. Je pense que cela devrait fonctionner.
Je pense que tu voulais dire quelque chose comme ça : Visualisation JSON
Je ne sais pas si vous pouvez l'utiliser, mais vous pouvez demander à l'auteur.
Quelque chose comme ça ?
pretty-json
https://github.com/warfares/pretty-json
échantillon en direct :
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
tohtml.com/javaProperties a bien fonctionné pour moi ; il rend le style "inline" ; très utile pour un simple copier-coller dans quelque chose d'autre.
0 votes
Consultez ma bibliothèque azimi.me/json-formatter-js