how to show JSON on codemirror?

Question

currently I am using ngx-codemirror - a angular wrapper on the codemirror.

in the my app

html as show

<ngx-codemirror [(ngModel)]="data" [autoFocus]=true [options]="{lineNumbers: true,theme: 'material',mode: 'markdown'}"></ngx-codemirror>

ts as show

data='';
   json = {
        "title": "Type",
        "description": "A type of product",
        "type": "object"
  };

constructor(){
      this.data = JSON.stringify(this.json);
}

it shows correctly the json text in a single line, but I want to show it in a json format instead of a string within a single line.

how would I do that?

Answer 1

You could send in an empty whitespace character as the space parameter in the JSON.stringify() method. Try the following

Controller

data = '';
json = {
  "title": "Type",
  "description": "A type of product",
  "type": "object"
};

ngOnInit() {
  this.data = JSON.stringify(this.json, null, ' ');    // <-- string literal ' ' as `space` argument  
}

You could also modify the indentation space by sending a number. For eg. JSON.stringify(this.json, null, 4) denotes an indentation of 4 spaces.

Template

<ngx-codemirror #codemirror
  [options]="codeMirrorOptions"
  [(ngModel)]="data"
  (ngModelChange)="setEditorContent($event)">
</ngx-codemirror>

Working example: Stackblitz