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

102

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

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

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

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

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

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

— 데릭
소스

1

사용자 지정 파이프를 생성하려는 것 같습니다. 여기 몇 가지 문서가 있습니다 : angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes . 그것을 밖으로 시도하고 문제가 발생하는 경우보다 구체적인 질문을 게시 할 수 주시기 바랍니다

— danyamachine

304

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

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

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

— 셰인 수
소스

감사합니다 이것은 완벽합니다!

— laurent

5

내가 그것을 검색하는 것이 부끄럽기 때문에 내가 당신에게 요점을 주었기 때문에 너무 명백했다 : p

— Capy

1

@Shane Hsu, 내장 json 파이프가 작동하지 않습니다. 나는 json을 예쁘게 만들기 위해 문자열을 사용하고 있습니다. 친절하게 내가 질문을 제기 한이 링크를 통해 이동하십시오. stackoverflow.com/questions/57405561/…

— Venkateswaran R

따라서 대소 문자를 구분합니다. :(

— Vibhor Dube

1

멋있는. 참고 서식이 필요로 <pre>하고 예를 들어 작동하지 않습니다 <p>, <span>등

— Jeppe

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

— 티에리 템플 리에
소스

작동했습니다! json 객체가 아닌 json 문자열이 있었기 때문에 JSON.stringify를 호출하기 전에이 줄을 추가해야했습니다. var jsonObject = JSON.parse (jsonString);

— Derek

예상치 못한 구문, 표준 파이프를 사용하는 것과 비슷할 것으로 예상 <div>{{obj | prettyprint }}</div> 하지만 작동했습니다!

— 폴 Gorbas

1

셰인 - HSU는 지적 @으로서,이 내장 된 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
소스

0

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

— 장 펑
소스