# 在前端頁面呈現 JSON 樹狀圖（pre 標籤 & JSON.stringify）
###### tags: `HTML` `JavaScript` `JSON`
## 目的
用 JavaScript 將 JSON 字串轉換成容易閱讀的樹狀圖格式，並呈現在前端頁面上。
## 技術
1. JavaScript 的 JSON.stringify(obj, replacer, indent)
2. HTML 的 pre 標籤
## 步驟
1. 用 JSON.stringify(obj, replacer, indent) 將物件轉換成 JSON 字串，其中：
(1) obj 是要轉換的物件。
(2) indent 是轉換成樹狀圖之後，每一行前面的縮排。
(3) replacer 用法請參考下方範例說明。
2. 把轉換好的 JSON 字串放進 pre 標籤。
## 範例
HTML 部份：
``` HTML
<!DOCTYPE html>
<html>
<head>
<title> How to pretty print JSON string in JavaScript ? </title>
</head>
<body>
<p id="jsonStrP"></p>
<button onclick="run();">Click Here</button>
<p id="title1"></p>
<pre id="jsonTreeViewPre1"></pre>
<p id="title2"></p>
<pre id="jsonTreeViewPre2"></pre>
</body>
</html>
```
JavaScript 部份：
``` JavaScript
<script>
var jsonStr = document.getElementById("jsonStrP");
var jsonTreeViewPre1 = document.getElementById("jsonTreeViewPre1");
var jsonTreeViewPre2 = document.getElementById("jsonTreeViewPre2");
// var obj : 要轉換的物件
var obj = {
"prop_1": {
"prop_11": "val_11",
"prop_12": "val_12"
},
"prop_2": "val_2",
"prop_3": "val_3"
};
// 把 obj 物件轉換成 JSON 字串 (非樹狀圖格式)
jsonStr.innerHTML = JSON.stringify(obj);
// 點選 Click Here 按鈕 - 把 obj 物件轉換成 JSON 字串 (樹狀圖格式) :
function run() {
// 結果 1 - 樹狀圖完整顯示 JSON 字串所有屬性 :
// (1) replacer 參數設定為 undefined。
// (2) 最後一個參數 4 表示每一行縮排為 4 個空格 (最多 10 個空格)。
title1.innerHTML = "結果 1 - 樹狀圖顯示 JSON 字串所有屬性 : "
jsonTreeViewPre1.innerHTML = JSON.stringify(obj, undefined, 4);
// 結果 2 - 樹狀圖只顯示 JSON 字串部份屬性 :
// 如果只需顯示 JSON 字串部份屬性，
// 則 replacer 參數設定為欲顯示的屬性 (型別為 Array，如下)，
// 顯示結果就會只有指定的屬性。
title2.innerHTML = "結果 2 - 樹狀圖顯示 JSON 字串指定屬性 :"
jsonTreeViewPre2.innerHTML = JSON.stringify(obj, ["prop_2", "prop_3"], 4);
}
</script>
```
## 範例結果
## 參考資料
* MDN web docs - JSON.stringify()
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
* How to pretty print JSON string in JavaScript ?
https://www.geeksforgeeks.org/how-to-pretty-print-json-string-in-javascript/
* [JavaScript] JSON stringify and parse
https://oawan.me/2016/javascript-json-stringify-and-parse/
Sign in with Wallet
Connect another wallet