如何在JavaScript中打印漂亮的格式化JSON字符串?

2021年4月2日11:08:45 发表评论 979 次浏览

给定一个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>

输出如下:

在单击按钮之前:

如何在JavaScript中打印漂亮的格式化JSON字符串?1

单击按钮后:

如何在JavaScript中打印漂亮的格式化JSON字符串?2

范例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>

输出如下:

在单击按钮之前:

如何在JavaScript中打印漂亮的格式化JSON字符串?3

单击按钮后:

如何在JavaScript中打印漂亮的格式化JSON字符串?4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: