JSON格式的數(shù)據(jù)顯示到HTML中

把下面的JSON數(shù)據(jù)顯示在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."
}]

實(shí)現(xiàn)方式:

HTML:
<pre>
    <code id="show"></code>
</pre>

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

結(jié)果圖:

demo.png

說明:

pre標(biāo)簽(w3school)

pre元素可定義預(yù)格式化的文本。被包圍在pre元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。

pre標(biāo)簽一個常見的應(yīng)用就是用來表示計算機(jī)的源代碼。

可以導(dǎo)致段落斷開的標(biāo)簽(例如標(biāo)題、<p>、<address>標(biāo)簽)絕不能包含在pre定義的塊里。盡管有些瀏覽器會把段落結(jié)束標(biāo)簽解釋為簡單地?fù)Q行,但是這種行為在所有瀏覽器上并不都是一樣的。

pre 元素中允許的文本可以包括鏈接、圖像和水平分割線等。當(dāng)把其他標(biāo)簽(比如<a>標(biāo)簽)放到pre塊中的時,就像放在 HTML/XHTML 文檔的其他部分中一樣。

在HTML4.01中,<pre>的width屬性已經(jīng)廢棄,width屬性規(guī)定每行的最大字符數(shù)。
HTML5中請使用CSS代替。

code標(biāo)簽(w3school)

定義計算機(jī)代碼文本。

在本例中的作用是能夠使過長的屬性值自動換行,不出現(xiàn)滾動條。

JSON.stringify(), JSON序列化

這個方法可以接收三個參數(shù),后面兩個參數(shù)是可選的。
第二個參數(shù)是一個過濾函數(shù)或數(shù)組。
第三個參數(shù) space 用來控制結(jié)果字符串里面的間距。如果是一個數(shù)字,則在字符串化時每一級別會比上一級別縮進(jìn)多這個數(shù)字值的空格(最多10個空格);如果是一個字符串,則每一級別會比上一級別多縮進(jìn)用該字符串(或該字符串的前十個字符)

JSON.stringify(value[, replacer [, space]])
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,697評論 19 139
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,539評論 1 41
  • 兒童的成長離不開習(xí)慣的培養(yǎng),習(xí)慣好的孩子,無論做事學(xué)習(xí)都會讓人順心很多,否則可能就是那個把你折騰得欲仙欲死的熊孩子...
    徐_風(fēng)閱讀 341評論 0 1
  • 今天是11月6日易效能早睡早起早鍛煉90天計劃踐行第一天,我的90天目標(biāo)是每天晚上10:30之前上床睡覺,每天早上...
    蘇珊許閱讀 561評論 0 0
  • 終于知道為什么大學(xué)期末的最后一個月生活費(fèi)總是如此的夠用,都在預(yù)習(xí)??!沒意思
    m0m閱讀 139評論 0 0

友情鏈接更多精彩內(nèi)容