使用h5頁面展示JSON數據

在開發過程中，經常需要把JSON數據在頁面上展示出來。下面我們介紹如何使用h5頁面展示JSON數據。

首先，我們需要一個JSON數據文件，比如下面這個例子：

{
"name": "小明",
"age": 23,
"email": "xiaoming@example.com",
"skills": [
{
"name": "JavaScript",
"level": "advanced"
},
{
"name": "HTML",
"level": "intermediate"
},
{
"name": "CSS",
"level": "intermediate"
}
]
}

接下來，我們需要使用JavaScript代碼把JSON數據解析出來，然后以HTML格式展示出來。下面是一個簡單的實現：

// 讀取JSON數據文件
fetch('data.json')
.then(res =>res.json())
.then(data =>{
// 將JSON數據轉換為HTML代碼
const html = buildHTML(data);
// 在頁面上展示HTML代碼
document.getElementById('json-data').innerHTML = html;
});
// 把JSON數據轉換為HTML代碼
function buildHTML(data) {
let html = '';
// 處理對象類型的數據
if (typeof data === 'object' && data !== null) {
html += '
';
for (const key in data) {
if (data.hasOwnProperty(key)) {
html += '
' + key + ': ' + buildHTML(data[key]) + '
';
}
}
html += '
';
}
// 處理數組類型的數據
if (Array.isArray(data)) {
html += '
';
data.forEach(item =>{
html += '
' + buildHTML(item) + '
';
});
html += '
';
}
// 處理字符串、數字和布爾類型的數據
if (typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') {
html += data;
}
return html;
}

最后，我們在HTML頁面上使用pre標簽展示JSON數據：

這樣，我們就可以在頁面上展示JSON數據了。