JSON bằng HTML có ngắt dòng

Question

Tôi có một số Javascript trên trang của mình thực hiện cuộc gọi ajax trả về một số dữ liệu JSON.

Với kết quả tôi làm điều này:

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

.box chỉ là một div trống.

console.log(results) mang lại cho tôi kết quả thụt lề với dấu ngắt dòng nhưng dữ liệu trong .box chỉ là tất cả trong một dòng.

Làm cách nào để đảm bảo rằng kết quả trong .box cũng có trên nhiều dòng và thụt lề?

Answer 1

.box chỉ là một div trống.

Làm cho nó một trống <pre> thay vì:

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

Answer 2

Tôi đồng ý với việc sử dụng <pre>, nhưng khác tùy chọn là để thay thế tất cả \n với <br> yếu tố, và không gian với  . Nó có thể thực sự không cần thiết (kể từ khi <pre> duy trì khoảng trắng). Bạn có thể thử:

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/