Angular 2 prettify JSON pipe filter

angular, javascript

Solution

Angular 2 has a built-in pipe for formatting JSON data. Just change your HTML template to this:

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

Your custom pipe is simply replicating a native feature.

Below is the full source of the JSON pipe:

@Pipe({name: 'json', pure: false})
export class JsonPipe implements PipeTransform {
  transform(value: any): string { return JSON.stringify(value, null, 2); }
}

See: https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/json_pipe.ts

Problem

Strange I'm trying to print my JSON in pretty formatted way however my JSON keeps returning with `\` and not being printed pretty. I have this solution which works on plnkr but not on my actual application. The image below is the printed JSON which is similar to what I have on plnkr. Can anyone shed a light why this is happening? Plnkr sample: https://plnkr.co/edit/ZqOXS30XPTu9ponWFdgZ?p=preview Code pipe: ``` @Pipe({ name: 'prettyprint' }) export class PrettyPrintPipe { transform(val) { if(typeof(val) == "undefined" || typeof(val) == null) return ''; //check value before process it. return JSON.stringify(val, null, 2) .replace(/ /g, '&nbsp;') .replace(/\\n/g, '&lt;br&gt;'); } } ``` JS Object, I need to `JSON.stingify` the two objects so I can `concat` or add the `childObj` inside the parent. ``` var parentJSONObj = JSON.stringify(object) var childObj = JSON.stringify(object) // in a diferent schema this.output = parentJSONObj.replace(replaceObj, childObj) // and need to replace a property inside childObj ``` so `this.output` is the final JSON structure which I think is already a JSON string, adding the pipe filter gives adds slashes. When I try `JSON.parse(this.output)` it gives me an error of `Unexpected token o in JSON at position 214`

Original source