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:
<pre>
    <code id="show"></code>
</pre>

JS:
var show = document.getElementById('show'),
    newData = JSON.stringify(arr, null, 4);
show.innerHTML = newData;

结果图:

demo.png

说明:

pre标签(w3school)

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

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

可以导致段落断开的标签(例如标题、<p>、<address>标签)绝不能包含在pre定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。

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

在HTML4.01中,<pre>的width属性已经废弃,width属性规定每行的最大字符数。
HTML5中请使用CSS代替。

code标签(w3school)

定义计算机代码文本。

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

JSON.stringify(), JSON序列化

这个方法可以接收三个参数,后面两个参数是可选的。
第二个参数是一个过滤函数或数组。
第三个参数 space 用来控制结果字符串里面的间距。如果是一个数字,则在字符串化时每一级别会比上一级别缩进多这个数字值的空格(最多10个空格);如果是一个字符串,则每一级别会比上一级别多缩进用该字符串(或该字符串的前十个字符)

JSON.stringify(value[, replacer [, space]])
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,833评论 19 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,691评论 1 41
  • 儿童的成长离不开习惯的培养,习惯好的孩子,无论做事学习都会让人顺心很多,否则可能就是那个把你折腾得欲仙欲死的熊孩子...
    徐_风阅读 1,886评论 0 1
  • 今天是11月6日易效能早睡早起早锻炼90天计划践行第一天,我的90天目标是每天晚上10:30之前上床睡觉,每天早上...
    苏珊许阅读 3,483评论 0 0
  • 终于知道为什么大学期末的最后一个月生活费总是如此的够用,都在预习啊!没意思
    m0m阅读 1,144评论 0 0

友情链接更多精彩内容