Existe-t-il un moyen de joliment imprimé JSON dans une page Web utilisant JavaScript?

Un moyen simple de le faire est d'exécuter:

JSON.stringify(data, null, " "); 

Où les données sont l'objet json que vous souhaitez imprimer jolie.

Cependant, tous les navigateurs ne contiennent JSON. Vous pouvez inclure json.js par Douglas Crockford qui ajoute l'objet JSON global s'il n'est pas pris en charge de manière native par le navigateur.

Jeter un coup d'oeil au plugin vkbeautify.js

http://www.eslinstructor.net/vkbeautify/

Il offre une impression assez jolie pour les textes JSON et XML.

Écrit en javascript simple, petit et rapide.

Mise en forme de données JavaScript / jolie imprimante

Ce que j'ai fini, c'est d'installer le module complémentaire JSONView pour Mozilla. Pas parfait, mais ça fait ce qu'il fallait faire.

J'utilise ce code bookmarklet sur mes navigateurs pour rendre lisible le paragraphe JSON

 javascript:(function(){document.body.firstChild.innerHTML = JSON.stringify(JSON.parse(document.body.firstChild.innerHTML), null, 4);})(); 

L'ajout d'un bookmarklet est simple: cliquez avec le bouton droit de la souris sur la barre des favoris – Ajouter / Nouveau – fournissez un nom et collez js dans url / zone de localisation

Comme les navigateurs actuels mettent la réponse json dans une <pre> l'intérieur, j'utilise body.firstChild

Si vous le souhaitez, vous pouvez utiliser Greasemonkey: http://misc.slowchop.com/misc/wiki/HumanReadableJSONGreasemonkey

Si vous voulez la sortie pour vos utilisateurs: http://jsonformatter.curiousconcept.com/

Vous pouvez essayer ceci, il ajoutera dans de beaux CSS.

 <pre style="font-family: Courier;background: #f4f4f4;border: solid 1px #e1e1e1;float: left;width: auto;"> JSON.stringify(data, null,' ').replace('[', '').replace(']', '') </pre>