Je suis JSON.stringify
un objet json par
result = JSON.stringify(message, my_json, 2)
Le 2
dans l'argument ci-dessus est censé afficher le résultat. Il le fait si je fais quelque chose comme alert(result)
. Cependant, je souhaite afficher cela à l'utilisateur en l'ajoutant à l'intérieur d'un div. Lorsque je fais cela, une seule ligne s'affiche. (Je ne pense pas que cela fonctionne parce que les sauts et les espaces ne sont pas interprétés comme du HTML?)
{ "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 }
Existe-t-il un moyen de sortir le résultat de JSON.stringify
vers un div d'une manière assez imprimée?
javascript
html
json
pretty-print
stringify
Alexis
la source
la source
Réponses:
Veuillez utiliser une
<pre>
balisedémo: http://jsfiddle.net/K83cK/
la source
pre
indique au moteur de navigation que le contenu à l'intérieur est pré-formaté et qu'il peut être affiché sans aucune modification. Ainsi, le navigateur ne supprimera pas les espaces blancs, les nouvelles lignes, etc.,code
c'est pour le rendre plus sémantique et indique que le contenu à l'intérieur est un extrait de code. Cela n'a rien à voir avec le formatage. Il est conseillé d'utiliser comme ça,<pre><code> /* Your code snippet here. */ </code></pre>
innerHTML
était plus courante à l'époque.textContent
est devenu une propriété standard plus tard.Assurez-vous que la sortie JSON est dans une
<pre>
balise.la source
Divulgation complète Je suis l'auteur de ce package, mais une autre façon de générer des objets JSON ou JavaScript de manière lisible avec la possibilité de sauter des parties, de les réduire, etc. est
nodedump
, https://github.com/ragamufin/nodedumpla source
Ma proposition est basée sur:
la source
Si votre
<pre>
balise affiche une seule ligne de JSON parce que c'est ainsi que la chaîne est déjà fournie (via une API ou une fonction / page hors de votre contrôle), vous pouvez la reformater comme ceci:HTML:
JavaScript:
ou jQuery:
la source
Si c'est vraiment pour un utilisateur, mieux que la simple sortie de texte, vous pouvez utiliser une bibliothèque comme celle-ci https://github.com/padolsey/prettyprint.js pour la générer sous forme de tableau HTML.
la source
Tenez compte des retours de votre API REST:
Ensuite, vous pouvez faire ce qui suit pour l'imprimer dans un bon format:
la source
use style
white-space: pre
la<pre>
balise modifie également le format du texte, ce qui peut être indésirable.la source
vous pouvez essayer ce référentiel: https://github.com/amelki/json-pretty-html
la source
imprimer l'état d'un composant avec JSX
stringifier
la source
pour ceux qui veulent montrer json pliable peuvent utiliser renderjson
Voici l'exemple en incorporant le javascript render js en html
la source