前端JSON格式化显示

一、现状

项目开发过程中，遇到JSON字符串回显的情况。直接显示的话，效果很丑，不方便查看。

因此，需要在前端页面对JSON进行格式化显示，期望可以实现如下效果。

JSON格式化解析网站：https://www.json.cn/

二、分析该网站解析的实现

通过浏览器的开发者工具，我们可以获取到该网站解析JSON所依赖的最基础的css和js，如下：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--json格式化依赖的js-->
<script src="https://www.json.cn/static/kj/js/bignumber.min.js"></script>
<script src="https://www.json.cn/static/202010/js/jquery.json.js"></script>

分析完成之后，编写网页，又发现了新的问题，缩放按钮的 “+” 图标无法加载。

分析报错和页面加载信息，发现还需要引入 font-awesome.css

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

至此大功告成。

三、代码和效果

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"><!--在线图标CSS--><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"><!--在线JQuery--><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><!--json格式化依赖的js--><script src="https://www.json.cn/static/kj/js/bignumber.min.js"></script><!--json格式化依赖的js--><script src="https://www.json.cn/static/202010/js/jquery.json.js"></script>
</head>
<body><div style="padding: 5px; background-color: #EEE; border: 2px solid #6495ED;">{"id":688,"name":"张三","age":24,"school":{"xiaoxue":"赣州市第一小学","chuzhong":"赣州市第二中学","gaozhong":"赣州市第三中学","daxue":["江西理工大学","赣南师范大学"],"books":{"bookOne":"平凡的世界","bookTwo":"大卫*科波菲尔","bookOne":"人类简史",}},"job":"Java开发","company":"XXXX科技公司"}</div><div><pre id="preContent" style="padding: 5px; background-color: #EEE; border: 2px solid #6495ED;"></pre></div>
</body>
<script type="text/javascript">$(document).ready(function(){let json = JSON.stringify({"id":688,"name":"张三","age":24,"school":{"xiaoxue":"赣州市第一小学","chuzhong":"赣州市第二中学","gaozhong":"赣州市第三中学","daxue":["江西理工大学","赣南师范大学"],"books":{"bookOne":"平凡的世界","bookTwo":"大卫*科波菲尔","bookOne":"人类简史",},},"job":"Java开发","company":"XXXX科技公司"}, undefined, 4);json = new JSONFormat(json, 4).toString();$("#preContent").html(json);});
</script>
</html>

前端JSON格式化显示相关推荐

vue项目json格式化显示
1.在项目开发中遇到json数据展示 2.利用函数进行json格式化 transitionJsonToString(jsonObj, callback) {// 转换后的jsonObj受体对象var ...
JSON 格式化显示到页面中
需求:在 textarea 中显示 JSON,为了好看起见,我们需要将 JSON 进行格式化处理显示. 解决方法: $("#configTextarea").val(JSON.st ...
js前端json格式化排版
背景: 想要将左边字符串实现右边的显示效果 <div class="col-lg-12"><textarea style="width:850px;he ...
html读取json换行无效,前端Json换行显示
Json换行测试json换行 "json":"{\"data\":{\"adfadf\":\"\",\&qu ...
android studio json格式化,Android json格式化显示，可展开与折叠
Android JSON viewer, to convert JSON Strings to a Friendly Readable Format, it supports expend&c ...
ElementUI中el-select请求springboot后台数据显示下拉项并在el-table中格式化显示
场景 Vue+ElementUI+axios+SpringBoot前后端分离的后台管理系统. 将表格中某字段类似于状态等需要关联字典表进行筛选查询时.示例如下注: 博客: https://blog. ...
php json转数组后并在前端展示,0516-如何从服务器端获取JSON格式字符串并解决到前端页面中显示...
一. 如何从服务器端获取JSON格式字符串并解决到前端页面中显示 1.采用AJAX异步方式从服务器请求必须为字符串的数据:例如 $PHP= '{"aaa":"bbb&q ...
浏览器网页自动转格式化显示json数据
我的浏览器是360的,之前google浏览器也用过格式化显示json的扩展插件,忘了叫什么,自己去扩展中心找找浏览器扩展中心, 搜索 json 找到 iFormatTool ,点击安装即可刷新下要 ...
Linux格式化显示json工具jq
Linux格式化显示json工具jq 安装格式化显示json 读取json文件获取所有的key 获取制定key的value值本地安装jq失败解决办法,离线下载`jq`依赖包`oniguruma ...
ABP入门系列（8）——Json格式化
ABP入门系列目录--学习Abp框架之实操演练源码路径:Github-LearningMpaAbp 讲完了分页功能,这一节我们先不急着实现新的功能.来简要介绍下Abp中Json的用法.为什么要在这一 ...

前端JSON格式化显示

一、现状

二、分析该网站解析的实现

三、代码和效果

前端JSON格式化显示相关推荐

最新文章

热门文章