javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端显示json格式化

前端显示json格式化示例代码

作者：PHP隔壁老王邻居

项目开发过程中遇到JSON字符串回显的情况,直接显示的话效果很丑,不方便查看,因此需要在前端页面对JSON进行格式化显示,下面这篇文章主要给大家介绍了关于前端显示json格式化的相关资料,需要的朋友可以参考下

实现效果

在前端页面上展示格式化的JSON数据可以通过以下步骤完成：

var jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York"
};

var formattedJson = JSON.stringify(jsonData, null, 2);

这里的2表示缩进的空格数，用于展示更好的可读性。

<pre id="jsonContainer"></pre>

然后，使用JavaScript将格式化的JSON字符串赋值给该元素的内容：

document.getElementById("jsonContainer").textContent = formattedJson;

这样，格式化的JSON数据就会显示在指定的HTML元素中。请注意，这只是一种基本的展示方法，你可以根据需求进行样式化和其他定制化处理。

以下是一个示例代码，允许用户输入JSON数据，并在前端页面上显示格式化后的JSON：

<!DOCTYPE html>
<html>
<head>
    <title>用户输入JSON格式化展示</title>
  <title>用户输入JSON格式化展示</title>
  <style>
    pre {
      background-color: #f5f5f5;
      padding: 10px;
    }
  </style>
</head>
<body>
  <textarea id="jsonInput" rows="10" cols="50" placeholder="在这里输入JSON数据"></textarea>
  <br>
  <button onclick="formatJson()">格式化JSON</button>
  <br>
  <pre id="jsonContainer"></pre>

  <script>
    function formatJson() {
      var jsonInput = document.getElementById("jsonInput").value;
      var jsonData;

      try {
        jsonData = JSON.parse(jsonInput);
      } catch (error) {
        alert("输入的JSON数据无效，请检查格式！");
        return;
      }

      var formattedJson = JSON.stringify(jsonData, null, 2);
      document.getElementById("jsonContainer").textContent = formattedJson;
    }
  </script>
</body>
</html>

在上述代码中，我们添加了一个<textarea>元素，允许用户在其中输入JSON数据。然后，我们添加了一个按钮，当用户点击按钮时，会调用formatJson()函数。

在formatJson()函数中，我们首先获取用户输入的JSON数据，并使用JSON.parse()方法尝试将其解析为JSON对象。如果解析失败，将弹出一个警告框提示用户输入的JSON数据无效。

如果解析成功，我们将使用JSON.stringify()方法将JSON对象格式化为字符串，并将格式化后的JSON字符串赋值给jsonContainer元素的内容，以在页面上显示。

你可以将上述代码保存为一个HTML文件，并在浏览器中打开该文件。用户可以在文本框中输入JSON数据，然后点击"格式化JSON"按钮，就可以看到格式化后的JSON数据在页面上展示出来了。

附：前端弹窗展示JSON数据

在页面弹窗展示json数据，需要换行展示，在这里有两种情况：

1、数据库存的json数据换行，为标准展示格式：

这种情况下，获取到后端数据后，前端只需要进行以下操作：

…

直接将后端数据展示：

ts部分：

openInformationDialog(row) {
  isShowInfoDialog.value = true
  if (row) {
	informationJSON.value = row
  }
}

div部分： 

  &lt;div style="white-space: pre-line"&gt;
    &lt;pre&gt;{{informationJSON}}&lt;/pre&gt;
  &lt;/div&gt;

存在的问题，空格不展示，只有换行，后面需要探究一下。

2、数据库存的数据为字符串类型的json数据，无换行，无空格。

这种情况下，获取到后端数据后，前端需要将字符串进行JSON转换

ts部分：

openInformationDialog(row) {
  isShowInfoDialog.value = true
  if (row) {
    informationJSON.value = JSON.stringify(JSON.parse(row), null, 4)
  }
}

div部分：

 <div style="white-space: pre-line">
    <pre>{{informationJSON.value}}</pre>
 </div>

这里推荐使用第二种方式，不论是数据库存储数据方面，还是页面展示效果方面来说，第二种都比较友好一点。

总结

到此这篇关于前端显示json格式化的文章就介绍到这了,更多相关前端显示json格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文