JSON в HTML с разрывами строк

У меня есть Javascript на моей странице, который делает вызов ajax, который возвращает некоторые данные JSON.

В результате я делаю это:

results = JSON.stringify(data, undefined, 2);
console.log(results);
$('.box').append(results);

.box - это просто пустой div.

console.log(results) дает мне отступы с разрывами строк, но данные в .box - это всего лишь одна строка.

Как я могу убедиться, что результат в .box также находится на нескольких строках и отступом?

Ответ 1

.box - это просто пустой div.

Сделайте вместо этого пустой <pre>:

<pre class="box"></pre>

Ответ 2

Я согласен с использованием <pre>, но другой вариант - заменить все \n на элементы <br> и пробелы с  . Это, вероятно, действительно не нужно (поскольку <pre> сохраняет пробелы). Вы можете попробовать:

var data = {key1: "value1", key2: "value2", key3: {key4: "value4"}},
    results = JSON.stringify(data, undefined, 2),
    results2 = results.replace(/\n/g, "<br>").replace(/[ ]/g, "&nbsp;");
console.log(results);
$(".box").append(results2);

DEMO: http://jsfiddle.net/Yk5Pb/3/