Angular 2美化JSON管道过滤器

Question

奇怪我试图以相当格式化的方式打印我的JSON，但是我的JSON继续使用login_user返回，而不是打印得漂亮。

我有这个解决方案适用于plnkr但不适用于我的实际应用程序。下图是打印的JSON，类似于我在plnkr上的内容。

有人能说清楚为什么会这样吗？

Plnkr样本： https://plnkr.co/edit/ZqOXS30XPTu9ponWFdgZ?p=preview

代码管道：

require(data.table)
fwrite(data.table(V1 = c("a;b", "a,b")), "test_fwrite1.csv", quote = "auto")
fread("test_fwrite1.csv")
read.csv("test_fwrite1.csv")

fwrite(data.table(V1 = c("a;b", "a,b")),
       "test_fwrite2.csv", sep = ";", quote = "auto")
fread("test_fwrite2.csv", sep = ";")
read.csv2("test_fwrite2.csv")

JS对象，我需要\这两个对象，所以我可以 @Pipe({ name: 'prettyprint' }) export class PrettyPrintPipe { transform(val) { if(typeof(val) == "undefined" || typeof(val) == null) return ''; //check value before process it. return JSON.stringify(val, null, 2) .replace(/ /g, ' ') .replace(/\\n/g, '<br>'); } } 或在父级内添加JSON.stingify。

concat

所以childObj是最终的JSON结构， 我认为 已经是一个JSON字符串，添加管道过滤器会添加斜杠。当我尝试var parentJSONObj = JSON.stringify(object) var childObj = JSON.stringify(object) // in a diferent schema this.output = parentJSONObj.replace(replaceObj, childObj) // and need to replace a property inside childObj 时，它会给我一个错误this.output

Answer 1

Angular 2有一个用于格式化JSON数据的内置管道。只需将您的HTML模板更改为：

<pre>{{ x | json }}</pre>

您的自定义管道只是复制原生功能。

以下是JSON管道的完整来源：

@Pipe({name: 'json', pure: false})
export class JsonPipe implements PipeTransform {
  transform(value: any): string { return JSON.stringify(value, null, 2); }
}

请参阅：https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/json_pipe.ts

Answer 2

将 div 标记更改为 pre 标记，

<pre [innerHTML]="x | prettyprint"></pre>

DEMO：https://plnkr.co/edit/bpisrwlf2aFZFteapwY1?p=preview

Answer 3

这是一个CSS解决方案：

code {
   white-space: pre; 
}

我创建了一个工作的plunker：

https://plnkr.co/edit/wULnv7b3tsKrML6hslWu?p=preview

Answer 4

2021 年更新：我构建了自己的自定义管道版本，它不仅可以美化，还可以像 vscode 一样为 json 添加颜色。在 blog post

上记录了如何在此处创建该管道

我的 Github repo 上可用的管道源代码

示例输出：

你可以试试这个

Run prettyjson ?

希望对你有帮助?