Afficher JSON au format HTML

Des recommandations sur la façon d’intégrer JSON dans une page HTML avec le format JSON dans un style lisible par l’homme? Par exemple, lorsque vous affichez 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

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

JSON.ssortingngify({ 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. Levy pour colorer le code.

Il convient d’append que IE7 et les navigateurs plus anciens ne prennent pas en charge la méthode JSON.ssortingngify .

Si vous l’affichez délibérément pour l’utilisateur final, enveloppez le texte JSON dans les balises


et , par exemple:

   
  [ { 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" } ]  

Sinon, j’utiliserais JSON Viewer .

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

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

Vous aurez la syntaxe en surbrillance JSON 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:

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

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 le retrait, mais les autres réponses semblent y remédier.

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.

quelque chose comme ça ??

jolie-json

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

échantillon live:

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

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 avec JavaScript?

Peut utiliser JSON2HTML pour le transformer en une liste HTML joliment formatée .. peut être un peu plus puissant que vous en avez vraiment besoin

http://json2html.com

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

Si vous envisagez simplement de le faire du sharepoint vue du débogage, vous pouvez utiliser un plug-in Firefox tel que JSONovich pour afficher le contenu JSON.

La nouvelle version de Firefox actuellement en version bêta est censée prendre en charge cette fonctionnalité (tout comme XML).

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 pour la colorer ou la transformer complètement en HTML.

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

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

Prenez d’abord la chaîne JSON et faites-en des objects réels . Bouclez toutes les propriétés de l’object, en plaçant les éléments dans une liste non ordonnée. Chaque fois que vous accédez à un nouvel object, créez une nouvelle liste.