web-dev-qa-db-fra.com

JSON.stringify la sortie à div de manière jolie d'impression

Je JSON.stringify un objet json par 

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

Le 2 dans l'argument ci-dessus est supposé imprimer le résultat. C'est ce que je fais si je fais quelque chose comme alert(result). Cependant, je veux envoyer ceci à l'utilisateur en l'ajoutant à l'intérieur d'un div. Lorsque je le fais, je ne vois plus qu’une seule ligne. (Je ne pense pas que cela fonctionne car les sauts et les espaces ne sont pas interprétés comme du code 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 sur une div de manière assez élégante?

javascripthtmljsonpretty-printstringify
107
Alexis

Veuillez utiliser une balise <pre> 

démo: http://jsfiddle.net/K83cK/ 

var data = {
  "data": {
    "x": "1",
    "y": "1",
    "url": "http://url.com"
  },
  "event": "start",
  "show": 1,
  "id": 50
}


document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);
<pre id="json"></pre>

291
Diode

Assurez-vous que la sortie JSON est dans une balise <pre>.

19
Adam

Divulgation complète Je suis l'auteur de ce paquet, mais un autre moyen de générer en lecture les objets JSON ou JavaScript de manière lisible, c'est-à-dire pouvoir sauter des parties, les réduire, etc. est nodedump, https://github.com/ragamufin/nodedump

6
ragamufin

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

2
Jason Livesay

Considérez vos retours d'API REST: 

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

Vous pouvez ensuite procéder comme suit pour l’imprimer au format Nice:

<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);
2
Siddarth Kanted

Si votre balise <pre> montre 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:

<pre id="json">{"some":"JSON string"}</pre>

JavaScript:

    (function() {
        var element = document.getElementById("json");
        var obj = JSON.parse(element.innerText);
        element.innerHTML = JSON.stringify(obj, undefined, 2);
    })();

ou jQuery:

    $(formatJson);

    function formatJson() {
        var element = $("#json");
        var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
    }
1
thinkOfaNumber

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>
  );
}

stringify

0
Bar Horing

vous pouvez essayer ce dépôt: https://github.com/amelki/json-pretty-html

0
kofifus

utiliser le style white-space: pre la balise <pre> modifie également le format du texte, ce qui peut être indésirable.

0
user7986267

Ma proposition est basée sur:

  • remplace chaque '\ n' (nouvelle ligne) par un <br>
  • remplacez chaque espace par & nbsp;

var x = { "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };


document.querySelector('#newquote').innerHTML = JSON.stringify(x, null, 6)
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });
<div id="newquote"></div>

0
gaetanoM