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

102

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

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

{"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 . попробуйте, и если у вас

— возникнут

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
  }

}

Наконец, поскольку мы возвращаем HTML-контент, канал должен использоваться внутри innerHTMLфункции:

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

— Dlacreme
источник

0

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

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