JSON.stringify sortie à div dans la manière pretty print

Question

I JSON.stringify un objet json par

result = JSON.stringify(message, my_json, 2)

Le site 2 dans l'argument ci-dessus est censé imprimer le résultat. Il le fait si je fais quelque chose comme alert(result) . Cependant, je veux le présenter à 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 pauses 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 d'afficher le résultat de JSON.stringify à un div de manière à ce qu'il soit bien imprimé ?

Answer 1

Considérez les retours de votre API REST :

{"Intent":{"Command":"search","SubIntent":null}}

Vous pouvez ensuite procéder comme suit pour l'imprimer dans un format agréable :

<pre id="ciResponseText">Output will de displayed here.</pre>   

var ciResponseText = document.getElementById('ciResponseText');
var obj = JSON.parse(http.response);
ciResponseText.innerHTML = JSON.stringify(obj, undefined, 2);

Answer 2

Beaucoup de personnes créent des réponses très étranges à ces questions, ce qui leur donne beaucoup plus de travail que nécessaire.

La façon la plus simple de procéder est la suivante

1. Analyse de la chaîne JSON avec JSON.parse(value)
2. Stringify Chaîne analysée dans un format agréable - JSON.stringify(input,undefined,2)
3. Régler la sortie sur la valeur de l'étape 2.

Dans le code réel, un exemple sera (en combinant toutes les étapes ensemble) :

    var input = document.getElementById("input").value;
    document.getElementById("output").value = JSON.stringify(JSON.parse(input),undefined,2);

output.value va être la zone où vous voudrez afficher un JSON embelli.

Answer 3

Imprimer l'état d'un composant avec JSX

render() {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <pre>
        <code>{JSON.stringify(this.state, null, 4)}</code>
      </pre>
    </div>
  );
}

stringifier

Answer 4

Si c'est vraiment pour un utilisateur, mieux qu'une simple sortie de texte, vous pouvez utiliser une bibliothèque comme celle-ci https://github.com/padolsey/prettyprint.js pour l'afficher sous forme de tableau HTML.

Answer 5

Style d'utilisation white-space: pre le site <pre> modifie également le format du texte, ce qui peut être indésirable.