कोणीय 2 पाइप जो JSON ऑब्जेक्ट को सुंदर-मुद्रित JSON में बदल देता है

Question

एक कोणीय 2 पाइप लिखने की कोशिश कर रहा है जो JSON ऑब्जेक्ट स्ट्रिंग लेगा और उपयोगकर्ता को प्रदर्शित करने के लिए इसे सुंदर-मुद्रित / स्वरूपित लौटाएगा।

उदाहरण के लिए, यह इसे ले जाएगा:

{"आईडी": 1, "संख्या": "K3483483344", "राज्य": "सीए", "सक्रिय": सच}

और HTML में प्रदर्शित होने पर कुछ इस तरह दिखाई देता है:

इसलिए मेरे विचार में मैं कुछ ऐसा कर सकता था:

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

Comments

ऐसा लगता है कि आप एक कस्टम पाइप बनाना चाहते हैं। यहाँ कुछ दस्तावेज हैं: angular.io/docs/ts/latest/guide/pipes.html# ? #custom_pipes । इसे आज़माने और यदि आप समस्या आने पर एक अधिक विशिष्ट प्रश्न पोस्ट करने के लिए स्वतंत्र महसूस

— danyamachine

Answer 1

मैं इसे करने के लिए एक और भी सरल तरीका जोड़ना चाहूंगा, अंतर्निहित jsonपाइप का उपयोग करके :

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

इस तरह, स्वरूपण संरक्षित है।

Comments

धन्यवाद यह एकदम सही है!

— लॉरेंट

क्या इतना स्पष्ट था कि मैंने आपको एक बिंदु दिया क्योंकि मुझे इसे खोजने में शर्म आ रही है: p

— कैपी

@ शेन ह्सू, बिल्ट-इन जसन पाइप काम नहीं कर रहा है। मैं json सुंदर बनाने के लिए स्ट्रिंग का उपयोग कर रहा हूँ। कृपया इस लिंक पर जाएं, जो मैंने सवाल उठाया था। stackoverflow.com/questions/57405561/…

— वेंकटेश्वरन R

तो यह केस-संवेदी है। :(

— विभोर दूब

ठंडा। नोट स्वरूपण की आवश्यकता है कि <pre>और जैसे साथ काम नहीं करेंगे <p>, <span>आदि

— Jeppe

Answer 2

मैं इसके लिए एक कस्टम पाइप बनाऊंगा:

@Pipe({
  name: 'prettyprint'
})
export class PrettyPrintPipe implements PipeTransform {
  transform(val) {
    return JSON.stringify(val, null, 2)
      .replace(' ', ' ')
      .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

Comments

काम किया! मेरे पास एक json स्ट्रिंग थी, एक json ऑब्जेक्ट नहीं, इसलिए मुझे JSON.stringify: var jsonObject = JSON.parse (jsonString) कॉल करने से पहले बस इस लाइन को जोड़ना था;

— डेरेक

अप्रत्याशित सिंटैक्स, मैं एक मानक पाइप का उपयोग करने की तरह उपयोग करने की अपेक्षा करता हूं: <div>{{obj | prettyprint }}</div> लेकिन यह काम किया!

— पॉल गोरबस

जैसा कि @ शेंन-ह्सू बताते हैं, एक बिल्ट-इन jsonपाइप है, जैसा कि कोणीय 1 में है।

— डेविड सोथर

आपके लापता implements PipeTransformहोने के बादexport class PrettyPrintPipe

— MatthiasSommer

यह स्वीकार किए गए ऐसर क्यों नहीं है? यह स्वीकृत उत्तर के विपरीत पूछे गए प्रश्न का उत्तर देता है

— davejoem

Answer 3

जैसा कि यह Google पर पहला परिणाम है, मुझे एक त्वरित योग जोड़ना है:

• यदि आपको केवल JSON को उचित स्वरूपण के बिना प्रिंट करने की आवश्यकता है, तो jsonशेन हसू द्वारा सुझाई गई बिल्ड-इन पाइप पूरी तरह से काम करती है:<pre>{{data | json}}</pre>

• हालाँकि, यदि आप एक अलग आउटपुट चाहते हैं, तो आपको अपना पाइप बनाने की आवश्यकता होगी, जैसा कि थियरी टेम्पलर ने सुझाया था:

  1. ng g generate pipe prettyjson
  2. in 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, ' ') // note the usage of `/ /g` instead of `' '` in order to replace all occurences
    .replace(/\n/g, '<br/>'); // same here
  }

}

3. अंत में, और क्योंकि हम HTML सामग्री वापस करते हैं, तो पाइप को एक innerHTMLफ़ंक्शन के अंदर उपयोग किया जाना चाहिए :

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

Answer 4

चूंकि मेरा वेरिएबल ngModel के साथ दो तरह से बाँधा गया है, इसलिए मैं इसे html पर नहीं कर सका। मैं घटक पक्ष पर इस्तेमाल किया JSON.stringify(displayValue, null, 2) और यह काम किया।