JSON 格式化

JSON虽然可以达到快速的解析,但是JSON在没有格式化之前,不利于阅读,尤其是比较大的JSON,看起来更是费劲,下面介绍一下Javascript,格式化JSON输出。

本章节主要会针对JSON的数据格式化(JSON美化),做出讲解。

JSON 格式化/美化 栗子

什么都不说了,直接给出一个美化JSON的栗子,先来一个复杂的JSON

我们先来一个稍微复杂的JSON,不做格式化如下:

{"title":"json在线解析(简版) - soJSON在线解析","domain":"https://www.sojson.com/simple_json_beta.html","keywords":"json在线解析","功能":["JSON美化","JSON数据类型显示","JSON数组显示角标","高亮显示","错误提示",{"备注":["www.sojson.com","json.la"]}],"加入我们":{"qq群":"259217951"}}

是不是很着急?这个JSON还稍微短一点,那么我们用JSON在线解析工具操作一把,如下:

{
    "title": "json在线解析(简版) - soJSON在线解析",
    "domain": "https://www.sojson.com/simple_json_beta.html",
    "keywords": "json在线解析",
    "功能": [
        "JSON美化",
        "JSON数据类型显示",
        "JSON数组显示角标",
        "高亮显示",
        "错误提示",
        {
            "备注": [
                "www.sojson.com",
                "json.la"
            ]
        }
    ],
    "加入我们": {
        "qq群": "259217951"
    }
}

看到结果后,惊不惊喜、意不意外?阅读是不是没瑕疵?

如果遇到JSON错误,还会中文提醒错误的地方,?应该要怎么样去改。体验一下吧?===> JSON在线解析

我们自己来用代码试验一下:

var json = {"title":"json在线解析(简版) - soJSON在线解析","domain":"https://www.sojson.com/simple_json_beta.html","keywords":"json在线解析","功能":["JSON美化","JSON数据类型显示","JSON数组显示角标","高亮显示","错误提示",{"备注":["www.sojson.com","json.la"]}],"加入我们":{"qq群":"259217951"}};
//每行以10个空格递进,并且输出到Id为 outText 的textarea中。
document.getElementById("outText").value = (JSON.stringify(json,null,10));

看到结果后,惊不惊喜、意不意外?阅读是不是没瑕疵?原来本站的格式化页面就是这么做的,把精华都直接告诉您们了。

版权所属:SOJSON(原创文章)

原文地址:https://www.sojson.com/json/json_fmt.html

转载时必须以链接形式注明原始出处及本声明。

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...