[javascript] JSON 객체를 예쁘게 인쇄 된 JSON으로 변환하는 Angular 2 파이프

Program / 글쓴이

JSON 개체 문자열을 가져와 사용자에게 표시하기 위해 예쁜 인쇄 / 형식으로 반환하는 Angular 2 파이프를 작성하려고합니다.

예를 들어 다음과 같습니다.

{ “id”: 1, “number”: “K3483483344”, “state”: “CA”, “active”: true}

그리고 HTML로 표시 될 때 다음과 같은 것을 반환합니다.

여기에 이미지 설명 입력

그래서 내 견해로는 다음과 같은 것을 가질 수 있습니다. 

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

답변

기본 제공 json파이프를 사용하여 더 간단한 방법을 추가하고 싶습니다 .

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

이렇게하면 서식이 유지됩니다.

답변

이를 위해 사용자 지정 파이프를 만듭니다.

@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

답변

이것이 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
  }

}
  1. 마지막으로 HTML 콘텐츠를 반환하므로 파이프는 innerHTML함수 내에서 사용해야합니다 .
<div [innerHTML]="data | prettyjson"></div>

답변

내 변수가 ngModel과 양방향으로 바인딩되어 있기 때문에 html에서 할 수 없습니다. 나는 구성 요소 측면에서 사용 JSON.stringify(displayValue, null, 2) 했고 그것은 일을했습니다.

답변