我如何以易于阅读(供人类阅读)的格式显示JSON?我主要寻找缩进和空白,甚至是颜色/字体样式等。


当前回答

您可以使用JSON.stringify(您的对象,null,2)第二个参数可以用作替换函数,将key和Val作为参数。如果您想修改JSON对象中的某些内容,可以使用此函数。

更多参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

其他回答

更好的方法。

用Javascript美化JSON数组

JSON.stringify(jsonobj,null,'\t')

找不到任何能为控制台提供良好语法高亮显示的解决方案,所以这里是我的2p

安装并添加cli高亮显示依赖项

npm install cli-highlight --save

全局定义logjson

const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
                               highlight( JSON.stringify(obj, null, 4), 
                                          { language: 'json', ignoreIllegals: true } ));

Use

console.logjson({foo: "bar", someArray: ["string1", "string2"]});

我使用JSONView Chrome扩展插件(它非常漂亮:):

编辑:添加了jsonreport.js

我还发布了一个在线独立的JSON漂亮打印查看器jsonreport.js,它提供了一个可读的HTML5报告,可以用来查看任何JSON数据。

您可以在新的JavaScript HTML5报告格式中阅读更多关于该格式的信息。

如果您正在寻找一个漂亮的库来美化网页上的json。。。

Prism.js非常好。

http://prismjs.com/

我发现使用JSON.stringify(obj,undefined,2)获取缩进,然后使用prism添加主题是一个不错的方法。

如果通过ajax调用加载JSON,那么可以运行Prism的一个实用方法来美化

例如:

Prism.highlightAll()

这是给Laravel的,CodeigniterHtml:<pre class=“jsonPre”></pre>

Controller:从控制器返回JSON值,如下所示

返回json_encode($data,json_PRETTY_PRINT);

在脚本中:<script>$('.jsonPre').html(结果)</脚本>

结果将是