JSON 格式化

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));

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