Angular 2 pipe, преобразующий объект JSON в красиво напечатанный JSON

102

Попытка написать канал Angular 2, который будет принимать строку объекта JSON и возвращать ее в красивом напечатанном / отформатированном виде для отображения пользователю.

Например, это будет так:

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

И верните что-то похожее на это при отображении в HTML:

введите описание изображения здесь

На мой взгляд, у меня могло быть что-то вроде: 

<td> {{ record.jsonData | prettyprint }} </td>
javascript json filter angular pipe Дерек
источник
1
похоже, вы хотите создать собственный канал. вот некоторая документация: angular.io/docs/ts/latest/guide/pipes.html#!#custom-pipes . попробуйте, и если у вас
возникнут

Ответы:

304

Я хотел бы добавить еще более простой способ сделать это, используя встроенный jsonканал:

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

Таким образом форматирование сохраняется.

Шейн Сюй
источник
Спасибо, это прекрасно!
Лоран
5
Было настолько очевидно , что я дал вам точку , потому что мне стыдно за это поиск: р
Capy
1
@Shane Hsu, встроенный json pipe не работает. Я использую строку, чтобы сделать 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

Тьерри Темплиер
источник
Работал! У меня была строка json, а не объект json, поэтому мне просто нужно было добавить эту строку перед вызовом JSON.stringify: var jsonObject = JSON.parse (jsonString);
Дерек
Неожиданный синтаксис, я ожидаю, что использование будет больше похоже на использование стандартного канала: <div>{{obj | prettyprint }}</div> но это сработало!
Павел Горбас
1
Как указывает @ shane-hsu, есть встроенный jsonканал, как и в Angular 1.
Дэвид Саутер
Вы пропали implements PipeTransformпослеexport class PrettyPrintPipe
Маттиас
1
Почему это не принятый ансер? Он отвечает на заданный вопрос, в отличие от принятого ответа
davejoem
4

Поскольку это первый результат в Google, позвольте мне подытожить:

  • если вам нужно только распечатать JSON без надлежащего форматирования, встроенный jsonканал, предложенный Шейном Хсу, отлично работает:<pre>{{data | json}}</pre>

  • однако, если вы хотите получить другой вывод, вам нужно будет создать свой собственный канал, как предложил Тьерри Темплиер:

    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>
Dlacreme
источник
0

поскольку моя переменная имеет двустороннюю привязку к ngModel, я не мог сделать это в html. Я использовал компоненты, JSON.stringify(displayValue, null, 2) и они сделали свою работу.

Фэн Чжан
источник