使用JavaScript美化打印JSON

Question

使用JavaScript美化打印JSON

javascriptjsonpretty-print

3379

我该如何以易于阅读（针对人类读者）的格式显示JSON？我主要寻找缩进和空格，甚至可以使用颜色/字体样式等。

- Mark

23

如果你只是将内容输出到HTML，可以用<pre>标签将其包裹起来。 - Ryan Walker

所有答案都可以，但你必须在HTML中使用JavaScript的 var str = JSON.stringify(obj, null, 2); // <pre id="output_result_div"></pre> 来输出结果。 - pankaj

使用 Monaco Editor 在 2023 年展示您的 JSON 是更好的选择。 - cwtuan

使用 JSON.stringify(data, null, 2) 格式化数据，然后使用 AceEditor、CodeMirror 或 Monaco Editor 进行显示。 - cwtuan

32个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brent Bradburn · Answer 1

用于调试目的显示对象的最简单方法：

console.log("data",data) // lets you unfold the object manually

如果您想在DOM中显示对象，您应该考虑到它可能包含被解释为HTML的字符串。因此，您需要进行一些转义...

var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display

- Mukundhan · Answer 2

现在使用TypeScript，你可以将自定义函数附加到全局对象上。

记得在主索引文件的顶部声明。

index.ts

declare global {
  interface JSON {
    prettyPrint: (obj: any) => void;
  }
}

JSON.prettyPrint = function (obj) {
  console.log(JSON.stringify(obj, null, 2));
};

其他文件

JSON.prettyPrint({ a: 1, b: 3 })

印刷品

{
  "a": 1,
  "b": 3
}