Angular 2管道将JSON对象转换为漂亮打印的JSON

102

尝试编写一个Angular 2管道，该管道将使用JSON对象字符串并将其漂亮打印/格式化后返回给用户显示。

例如，将采取以下措施：

{“ id”：1，“ number”：“ K3483483344”，“ state”：“ CA”，“ active”：true}

并以HTML显示时返回如下所示的内容：

所以在我看来，我可以这样写：

<td> {{ record.jsonData | prettyprint }} </td>

— 德里克
source

1

看起来像您想创建一个自定义管道。这是一些文档：angular.io/docs/ts/latest/guide/pipes.html# ! #custom-pipes。试试看，如果您遇到问题，请随时发布一个更具体的问题

— danyamachine

304

我想添加一个更简单的方法，使用内置json管道：

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

这样，将保留格式。

— 许珊珊
source

谢谢，这是完美的！

— 劳伦特

5

太明显了，我给了你一个要点，因为我为寻找它感到

— ham

1

@Shane Hsu，内置json管道无法正常工作。我正在使用字符串使json漂亮。请通过这个链接提出我的问题。stackoverflow.com/questions/57405561/...

— Venkateswaran - [R

因此，它区分大小写。:(

— Vibhor Dube

1

凉。请注意格式要求<pre>，将与如不行<p>，<span>等

— 叶普

21

我将为此创建一个自定义管道：

@Pipe({
  name: 'prettyprint'
})
export class PrettyPrintPipe implements PipeTransform {
  transform(val) {
    return JSON.stringify(val, null, 2)
      .replace(' ', '&nbsp;')
      .replace('\n', '<br/>');
  }
}

并以这种方式使用它：

@Component({
  selector: 'my-app',
  template: `
    <div [innerHTML]="obj | prettyprint"></div>
  `,
  pipes: [ PrettyPrintPipe ]
})
export class AppComponent {
  obj = {
    test: 'testttt',
    name: 'nameeee'
  }
}

看到这个stackblitz：https ://stackblitz.com/edit/angular-prettyprint

— 蒂埃里·坦佩利（Thierry Templier）
source

工作了！我有一个json字符串，而不是json对象，因此我只需要在调用JSON.stringify之前添加以下行即可：var jsonObject = JSON.parse（jsonString）;

— 德里克（Derek）

出乎意料的语法，我希望用法更像是使用标准管道： <div>{{obj | prettyprint }}</div> 但这确实有效！

— Paul Gorbas

1

作为@巴蒂尔胥指出，有一个内置的json管道，因为在角1

— 大卫南风

您implements PipeTransform之后的失踪export class PrettyPrintPipe

— MatthiasSommer

1

为什么这不是公认的分析工具？它回答了所提出的问题，与接受的答案不同

— davejoem

4

由于这是google上的第一个结果，让我快速总结一下：

如果您只需要打印JSON而没有正确的格式，那么jsonShane Hsu建议的内置管道可以完美地工作：<pre>{{data | json}}</pre>
但是，如果您希望获得不同的输出，则需要按照Thierry Templier的建议创建自己的管道：
1. ng g generate pipe prettyjson
2. 在prettyjson.pipe.ts中：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'prettyjson'
})
export class PrettyjsonPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {
    return JSON.stringify(value, null, 2)
    .replace(/ /g, '&nbsp;') // note the usage of `/ /g` instead of `' '` in order to replace all occurences
    .replace(/\n/g, '<br/>'); // same here
  }

}

最后，由于我们返回HTML内容，因此必须在innerHTML函数内使用管道：

<div [innerHTML]="data | prettyjson"></div>

— Dlacreme
source

0

由于我的变量是与ngModel绑定的两种方式，因此我无法在html上执行此操作。我在组件方面使用过JSON.stringify(displayValue, null, 2) ，它完成了工作。

— 张峰
source