JSON.stringify вывод в div в довольно печатном виде

I JSON.stringify объект json с помощью

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

В приведенном выше аргументе 2 предполагается напечатать результат. Он делает это, если я делаю что-то вроде alert(result). Однако я хочу передать это пользователю, добавив его в div. Когда я это делаю, я получаю только одну строку. (Я не думаю, что он работает, потому что разрывы и пробелы не интерпретируются как html?)

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

Есть ли способ вывести результат JSON.stringify в div в довольно печатном виде?

Ответы

Ответ 1

Пожалуйста, используйте <pre>

демо: 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>

Ответ 2

Убедитесь, что вывод JSON находится в теге <pre>.

Ответ 3

Полное раскрытие Я являюсь автором этого пакета, но еще один способ для вывода объектов JSON или JavaScript читаемым способом в комплекте с возможностью пропуска частей, свернуть их и т.д. nodedump, https://github.com/ragamufin/nodedump

Ответ 4

Если это действительно для пользователя, лучше, чем просто вывод текста, вы можете использовать библиотеку, подобную этой https://github.com/padolsey/prettyprint.js, чтобы выводить ее как HTML-таблица.

Ответ 5

Считайте, что ваш REST API возвращает:

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

Затем вы можете сделать следующее, чтобы распечатать его в хорошем формате:

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

Ответ 6

Использовать стиль white-space: pre Тег <pre> также изменяет текстовый формат, который может быть нежелательным.

Ответ 7

Мое предложение основано на:

  • замените каждый '\n' (перевод строки) на <br>
  • замените каждый пробел & 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>

Ответ 9

распечатать состояние компонента с помощью JSX

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

stringify

Ответ 10

Если ваш <pre> показывает одну строку JSON из-за того, что строка уже предоставлена (через API или некоторую функцию/страницу вне вашего контроля), вы можете переформатировать ее следующим образом:

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

или jQuery:

    $(formatJson);

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