Json result returning as empty [duplicate]

I wrote a method to get the stringified json as output but since it was blocking the UI i wrote this inside a timeout. now i'm getting the result as empty in UI. i want the json to show up without blocking while JSON.stringify is happening.

code:

handleJsonViewerOpen(): void {
this.jsonView = true;
this.loading = true;
this.showMonacoEditor();
}

showMonacoEditor(): void {
setImmediate(() => {
setTimeout(() => {
this.showEditor = true;
this.cdr.detectChanges();
}, 300);
});
}
jsonstringify(): string {
this.loading = false;
this.cdr.markForCheck();
let result: string = '';
setTimeout(() => {
result = JSON.stringify(this.data, null, '\t');
}, 0);
return result;
}


html section for the ts:

<button
id="btnGetJson"
pButton
icon="fa fa-file-code-o"
pTooltip="Json Viewer"
tooltipPosition="bottom"
class="p-button-secondary"
(click)="handleJsonViewerOpen()"
></button>
<p-dialog
[(visible)]="jsonView"
header="Json Viewer({{ header }})"
positionTop="0"
styleClass="custom-dialog"
responsive="true"
[closable]="false"
>
<loader [visible]="loading" *ngIf="!jsonViewerLoader"></loader>
<div *ngIf="showEditor">
<ngx-codemirror [ngModel]="jsonstringify()" [options]="editorOptions"> </ngx-codemirror>
</div>

Continue reading...