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

Veuillez utiliser un <pre> étiquette

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").textContent = JSON.stringify(data, undefined, 2);

<pre id="json"></pre>

Answer 2

Assurez-vous que la sortie JSON est dans un fichier <pre> étiquette.

Answer 3

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

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

Answer 4

Ma proposition est basée sur :

• remplacer chaque ' \n (nouvelle ligne) avec 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>' + ' '.repeat(p1.length); });

  <div id="newquote"></div>

Answer 5

Je suis l'auteur de ce paquet, mais il existe un autre moyen d'afficher des objets JSON ou JavaScript de manière lisible, avec la possibilité de sauter des parties, de les réduire, etc. nodedump , https://github.com/ragamufin/nodedump