前端JSON格式化显示

最新推荐文章于 2024-10-11 09:35:57 发布

大话家DHJ

最新推荐文章于 2024-10-11 09:35:57 发布

阅读量4k

点赞数 4

分类专栏：前端文章标签： html json 格式化 jquery 前端

本文链接：https://blog.csdn.net/qq_41057885/article/details/119185726

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

一、现状

项目开发过程中，遇到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>