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

更新时间：2024年03月02日 09:08:28 作者：PHP隔壁老王邻居

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

实现效果

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

获取JSON数据：首先，你需要获取要展示的JSON数据。你可以从后端API获取数据，或者直接在前端定义一个JSON对象。
格式化JSON：使用JavaScript的JSON对象，可以将JSON数据转换为字符串，并使用JSON.stringify()方法进行格式化。例如：

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

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

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

在页面上展示：将格式化后的JSON字符串插入到HTML元素中，例如一个<pre>标签或一个<code>标签，这样可以保留JSON的格式。例如：

<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格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS模拟酷狗音乐播放器收缩折叠关闭效果代码
这篇文章主要介绍了JS模拟酷狗音乐播放器收缩折叠关闭效果代码,涉及JavaScript响应鼠标事件控制页面元素样式变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
详解搭建es6+devServer简单开发环境
这篇文章主要介绍了详解搭建es6+devServer简单开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
js运动事件函数详解
这篇文章主要为大家详细介绍了JavaScript运动事件函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
javascript-简单的日历实现及Date对象语法介绍(附图)
主要是对Date对象的使用，首先回忆一下Date对象的参数及方法，代码如下，感兴趣的朋友可以参考下哈
2013-05-05
用js写了一个类似php的print_r输出换行功能
因为php的print_r比较好用同时js却没有这个功能于是自己就写了一个，感兴趣的你可不要错过了哈，希望本文对你提高知识有所帮助
2013-02-02
详细聊聊闭包在js中充当着什么角色
在js中，闭包是一个很重要又相当不容易完全理解的要点,下面这篇文章主要给大家介绍了关于闭包在js中充当着什么角色的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
JavaScript 语言精粹学习笔记
JavaScript建立在一些非常好的想法和少数非常坏的想法之上。
2009-08-08
JS如何寻找数组中心索引过程解析
这篇文章主要介绍了JS如何寻找数组中心索引过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06
JavaScript数据类型转换详解（推荐）
众所周知JavaScript是一门弱类型（语言，即变量的类型是不确定的。所以下面这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,需要的朋友可以参考下
2021-05-05
CryptoJS中AES实现前后端通用加解密技术
这篇文章主要为大家详细介绍了CryptoJS中AES实现前后端通用加解密技术，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12