js 格式化json

需求：后端返回json数据，然后在前端页面上进行json格式化展示。

如果不格式话，默认后端的json数据是一个大字符串。格式话方法有两种。

方法一：JSON.stringify()

JSON.stringify(value，replacer，space) 方法用于将 JavaScript 值转换为 JSON 字符串。

• value：必需， 要转换的 JavaScript 值（通常为对象或数组）。
• replacer：可选。用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
• space：可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

<textarea id="show_res" cols="50" rows="30" style="margin:5px"></textarea>

$.doAjax({
	async:true,
	url :url,
	maskLoad:true,
	callback: function(_data){
	   	$("#show_res").val(JSON.stringify(_data, null, "\t"));
	}
 });

效果如下：

方法二：jquery.json-viewer.js

项目地址：https://www.jqueryscript.net/other/jQuery-Plugin-For-Easily-Readable-JSON-Data-Viewer.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.json-viewer@1.4.0/json-viewer/jquery.json-viewer.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.json-viewer@1.4.0/json-viewer/jquery.json-viewer.min.css"/>

<pre id="local"></pre>
$.doAjax({
	async:true,
	url :url,
	maskLoad:true,
	callback: function(_data){
		$('#local').jsonViewer(_data.data);
	}
});

补充json-viewer的cdn地址：https://www.jsdelivr.com/package/npm/jquery.json-viewer

效果图：

方法三、JSONView

项目地址：https://plugins.jquery.com/jsonview/，github地址：https://github.com/yesmeck/jquery-jsonview

注：json-viewer和JSONView是两个不同的项目，我个人认为前者更好看一下。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css"/>

var json = {"hey": "guy","anumber": 243,"anobject": {"whoa": "nuts","anarray": [1,2,"thr<h1>ee"], "more":"stuff"},"awesome": true,"bogus": false,"meaning": null, "japanese":"明日がある。", "link": "http://jsonview.com", "notLink": "http://jsonview.com is great"};

$(function() {
  $("#json").JSONView(json);
  // with options
  $("#json-collasped").JSONView(json, { collapsed: true });
});

效果：

补充JSONView的cdn地址：https://cdnjs.com/libraries/jquery-jsonview