0

I've been looking for a nice way to display JSON and all the answers have a few solutions, but no matter what I try it just makes it one long line with no formatting. These are all the things I've tried.

<div>{{ jsonValue | json }}</div>

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

<pre [innerHtml]="jsonValue"></pre>

import {PrettyJsonModule} from 'angular2-prettyjson'; <pre [innerHtml]="eligibilityView | prettyjson:3"></pre>

import {PrettyJsonModule} from 'angular2-prettyjson'; <pre>{{ eligibilityView | prettyjson:3 }}</pre>

From all the questions I've seen asked, one of these should work, but they all are only a single line with no formatting.

Jhorra
  • 6,233
  • 21
  • 69
  • 123
  • [This post](https://stackoverflow.com/a/37310013/1009922) should answer your question. – ConnorsFan Apr 11 '20 at 00:14
  • @ConnorsFan Making the custom pipe did work, so if you want to add it as an answer I'll mark it accepted. – Jhorra Apr 11 '20 at 01:04
  • If you don't mind, I would mark your question as a duplicate of the post that I suggested. – ConnorsFan Apr 11 '20 at 01:22
  • 1
    @ConnorsFan. That's fair. it wasn't completely that as I actually used innerHtml instead of innerHTML, and I think there was another syntax error that was causing the issue, but in the end going through that other question did result in it working. – Jhorra Apr 11 '20 at 01:36

1 Answers1

0

I will strongly encourage you to use Monaco editor (Open Source by Microsoft that powers VS Code). Rendering complex JSONs (object that contain arrays and arrays of arrays etc,.) gets complicated.

PS: There are call backs to pretty print after load - initially it doesn't pretty print

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
 self.MonacoEnvironment = {
  baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
 };
 importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
 let editor = monaco.editor.create(document.getElementById('container'), {
  value: [
   'function x() {',
   '\tconsole.log("Hello world!");',
   '}'
  ].join('\n'),
  language: 'javascript',
  theme: 'vs-light' 
 });
 
 editor.addListener('didType', () => {
  console.log(editor.getValue());
 });
  
});
html, body, #container {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<div id="container"></div>
takrishna
  • 4,884
  • 3
  • 18
  • 35
  • Some [packages](https://github.com/microsoft/monaco-editor/issues/1594#issuecomment-534690154) are also offered to help integrate Monaco in Angular applications. – ConnorsFan Apr 11 '20 at 00:28