如何在html中写json格式数据类型,JSON格式的数据显示到HTML中

把下面的JSON数据显示在HTML页面中：

arr = [{

id: 1,

desc: "This is the description of the first object."

}, {

id: 2,

desc: "This is the description of the second object."

}, {

id: 3,

desc: "This is the description of the third object. Now, I'm going to repeat the description of this value.This is the description of the third objectThis is the description of the third objectThis is the description of the third object"

}, {

id: 4,

desc: "This is the description of the third object."

}]

实现方式：

HTML:

JS:

var show = document.getElementById('show'),

newData = JSON.stringify(arr, null, 4);

show.innerHTML = newData;

结果图：

demo.png

说明：

pre标签(w3school)

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

pre标签一个常见的应用就是用来表示计算机的源代码。

可以导致段落断开的标签(例如标题、

、

标签)绝不能包含在pre定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括链接、图像和水平分割线等。当把其他标签(比如标签)放到pre块中的时，就像放在 HTML/XHTML 文档的其他部分中一样。

在HTML4.01中，

的width属性已经废弃，width属性规定每行的最大字符数。

HTML5中请使用CSS代替。

code标签(w3school)

定义计算机代码文本。

在本例中的作用是能够使过长的属性值自动换行，不出现滚动条。

JSON.stringify()， JSON序列化

这个方法可以接收三个参数，后面两个参数是可选的。

第二个参数是一个过滤函数或数组。

第三个参数 space 用来控制结果字符串里面的间距。如果是一个数字，则在字符串化时每一级别会比上一级别缩进多这个数字值的空格(最多10个空格)；如果是一个字符串，则每一级别会比上一级别多缩进用该字符串(或该字符串的前十个字符)

JSON.stringify(value[, replacer [, space]])