给定一个JavaScript对象, 任务是使用JavaScript以漂亮(易于阅读)的格式打印JSON对象。使用<pre>元素以漂亮的格式显示对象。
方法：
- 声明一个JSON对象并将其存储到变量中。
- 采用JSON.stringify(obj)将JavaScript对象转换为字符串并显示它的方法。
- 采用JSON.stringify(obj, replacer, space)将JavaScript对象转换为漂亮格式的字符串的方法。在此示例中, 我们使用空间大小4。它以对齐格式显示对象。
范例1：这个例子使用JSON.stringify()方法打印<pre>标签中的object元素。
<!DOCTYPE html>
<html>
<head>
<title>
How to pretty print JSON
string in JavaScript ?
</title>
</head>
<body>
<h1 style = "color:green;">
lsbin
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "gfg_Run();">
click here
</button>
<pre id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</pre>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var obj = {
"prop_1": {
"prop_11": "val_11", "prop_12": "val_12"
}, "prop_2": "val_2", "prop_3": "val_3"
};
el_up.innerHTML = JSON.stringify(obj);
function gfg_Run() {
el_down.innerHTML = JSON.stringify(obj, undefined, 4);
}
</script>
</body>
</html>输出如下：
在单击按钮之前：
单击按钮后：
范例2：此示例与上一个示例有点相似, 但是它指定了用于打印对象对象的属性。它还利用了JSON.stringify()方法在<pre>元素内打印对象。
<!DOCTYPE html>
<html>
<head>
<title>
How to pretty print JSON
string in JavaScript ?
</title>
</head>
<body>
<h1 style = "color:green;">
lsbin
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "gfg_Run();">
click here
</button>
<pre id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</pre>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var obj = {
"prop_1": {
"prop_11": "val_11", "prop_12": "val_12"
}, "prop_2": "val_2", "prop_3": "val_3"
};
el_up.innerHTML = JSON.stringify(obj);
function gfg_Run() {
el_down.innerHTML = JSON.stringify(obj, ['prop_2', 'prop_3'], 4);
}
</script>
</body>
</html>输出如下：
在单击按钮之前：
单击按钮后：
