I have some Javascript on my page that makes an ajax call which returns some JSON data.
With the result I do this:
results = JSON.stringify(data, undefined, 2);
console.log(results);
$('.box').append(results);
.box is just an empty div.
console.log(results) gives me an indented result with linebreaks but the data in .box is just all in one line.
How can I make sure that the result in .box is also on multiple lines and indented?
I agree with using <pre>, but another option is to replace all \n with <br> elements, and spaces with . It's probably really unnecessary (since <pre> preserves the whitespace). You can try:
var data = {key1: "value1", key2: "value2", key3: {key4: "value4"}},
results = JSON.stringify(data, undefined, 2),
results2 = results.replace(/\n/g, "<br>").replace(/[ ]/g, " ");
console.log(results);
$(".box").append(results2);
