使用H5展示JSON數據

JSON簡介

JSON（JavaScript Object Notation，JavaScript 對象表示法）是一種輕量級的數據交換格式。它基于JavaScript語言的一個子集，是一種文本格式，可以被任何編程語言讀取和解析。

如何使用H5展示JSON數據

HTML5提供了很多方便的標簽和方法，可以方便地展示JSON數據。其中，pre標簽可以使文本保留空格和格式，適合顯示JSON數據。以下是展示JSON數據的簡單示例：

{
"name": "John Smith",
"age": 28,
"email": "john@example.com",
"friends": [
{
"name": "Jane Doe",
"age": 25,
"email": "jane@example.com"
},
{
"name": "Bob Johnson",
"age": 32,
"email": "bob@example.com"
}
]
}

如上述示例，使用pre標簽包裹JSON數據，可以保留JSON數據的所有空格和格式，并且更加易讀。

利用JavaScript和H5實現動態展示JSON數據

可以利用JavaScript和H5來動態展示JSON數據。以下是一個非常簡單的示例，展示了如何動態地展示JSON數據：

const jsonData = {
"name": "John Smith",
"age": 28,
"email": "john@example.com",
"friends": [
{
"name": "Jane Doe",
"age": 25,
"email": "jane@example.com"
},
{
"name": "Bob Johnson",
"age": 32,
"email": "bob@example.com"
}
]
};
const jsonHtml = document.createElement('pre');
jsonHtml.innerText = JSON.stringify(jsonData, null, 4);
document.body.appendChild(jsonHtml);

如上述示例，使用JavaScript創建一個pre標簽，并將JSON數據轉換為字符串展示在標簽內。該示例還可以實現格式化輸出，即設置第二個參數為null，同時設置第三個參數為4，即4個空格作為縮進。