JSON數(shù)據(jù)格式現(xiàn)在已經(jīng)是互聯(lián)網(wǎng)行業(yè)中最常用的數(shù)據(jù)交互格式之一，因?yàn)樗?jiǎn)潔、輕量、易于讀寫。在前端開發(fā)中，我們通常會(huì)涉及到從服務(wù)器獲取JSON數(shù)據(jù)并將其展示到頁(yè)面上的需求，這也就需要我們掌握怎樣使用JavaScript將JSON數(shù)據(jù)讀取到頁(yè)面中。

讀取JSON數(shù)據(jù)可以分為兩個(gè)步驟，第一步是將JSON數(shù)據(jù)轉(zhuǎn)換為JavaScript對(duì)象，第二步是遍歷對(duì)象并將其展示到網(wǎng)頁(yè)中。我們可以使用JSON.parse()方法將JSON數(shù)據(jù)轉(zhuǎn)換為JavaScript對(duì)象，如下所示：

var jsonData = '{"name":"Linda", "age":24, "gender":"female"}';
var jsonObj = JSON.parse(jsonData);

上述代碼將一個(gè)JSON字符串轉(zhuǎn)換成一個(gè)名為jsonObj的JavaScript對(duì)象，該對(duì)象包含了"name"、"age"和"gender"三個(gè)屬性。接下來我們就可以通過遍歷該對(duì)象的方式將其展示到頁(yè)面中了，如下所示：

var jsonDom = document.getElementById('json-content');
for(var key in jsonObj) {
var p = document.createElement('p');
p.textContent = key + ' : ' + jsonObj[key];
jsonDom.appendChild(p);
}

上述代碼中，我們通過for...in循環(huán)遍歷了jsonObj對(duì)象的所有屬性，然后創(chuàng)建了一個(gè)p標(biāo)簽，將屬性名和屬性值拼接起來設(shè)置為該標(biāo)簽的textContent，最后將這個(gè)p標(biāo)簽添加到名為jsonDom的容器中即可。