js 格式化json

红太狼 2021-05-12 11:49 710阅读 0赞

需求：后端返回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"));
    	}
     });

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

**方法二**：**jquery.json-viewer.js**

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

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

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1][]

**方法三、JSONView**

项目地址：[https://plugins.jquery.com/jsonview/][https_plugins.jquery.com_jsonview]，github地址：[https://github.com/yesmeck/jquery-jsonview][https_github.com_yesmeck_jquery-jsonview]

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

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20210511/00bd941f0f9848edaadb256dd3a11320.png
[https_www.jqueryscript.net_other_jQuery-Plugin-For-Easily-Readable-JSON-Data-Viewer.html]: https://www.jqueryscript.net/other/jQuery-Plugin-For-Easily-Readable-JSON-Data-Viewer.html
[https_www.jsdelivr.com_package_npm_jquery.json-viewer]: https://www.jsdelivr.com/package/npm/jquery.json-viewer
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 1]: /images/20210511/32900ad2ecc44acf973ccc7b2a23d70d.png
[https_plugins.jquery.com_jsonview]: https://plugins.jquery.com/jsonview/
[https_github.com_yesmeck_jquery-jsonview]: https://github.com/yesmeck/jquery-jsonview
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70 2]: /images/20210511/3313f51df2064b7e8ec568b72f6b71b2.png
[https_cdnjs.com_libraries_jquery-jsonview]: https://cdnjs.com/libraries/jquery-jsonview