Кутова труба 2, яка перетворює об'єкт JSON на досить надрукований JSON

99

Спроба написати трубу 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 . спробуйте, і якщо у вас

— виникнуть проблеми, сміливо

301

Я хотів би додати ще простіший спосіб зробити це, використовуючи вбудовану jsonтрубу:

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

Таким чином, форматування зберігається.

— Шейн Хсу
джерело

Дякую, це ідеально!

— Лоран,

5

Це було настільки очевидно, що я дав вам бал, бо мені соромно за його пошук: p

— Капі

1

@Shane Hsu, вбудований json pipe не працює. Я використовую рядок, щоб зробити json гарним. Будь ласка, перейдіть за цим посиланням, яке я порушив питання. stackoverflow.com/questions/57405561/…

— Venkateswaran R

Тож він чутливий до регістру. :(

— Vibhor Dube

Класно. Зверніть увагу , що форматування вимагає <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'
  }
}

Дивіться цей стекбліц: 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

— MatthiasSommer

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) і це зробило свою роботу.

— Фен Чжан
джерело