get jsonString(): string {
    this.loading = false;
    this.cdr.markForCheck();
    return JSON.stringify(this.data, null, '\t');
 }

 set jsonString(data: string) {
    this.data = JSON.parse(data);
 }

JSON.stringify is taking too long to complete since my data is huge and it's blocking my UI, I'm using a spinner loader and it's stuck . I want the loader to spin till the data is ready to show

<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>

 get jsonString(): string {
    this.loading = false;
    this.cdr.markForCheck();
    return JSON.stringify(this.data, null, '\t');
 }

 set jsonString(data: string) {
    this.data = JSON.parse(data);
 }

JSON.stringify is taking too long to complete since my data is huge and it's blocking my UI, I'm using a spinner loader and it's stuck . I want the loader to spin till the data is ready to show

<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>

• angular

2 Answers 2

Both JSON.stringify and JSON.parse are resource intensive operations when working with large datasets, you performance might be impacted.

But the real problem is using this logic in the getter and setter methods, so when you define logic inside get, the logic gets called in every change detection cycle, so the logic get's called a lot of times.

Also you are calling this.cdr.markForCheck(); inside the get method which might be creating an infinite loop of change detection cycles.

The solution is to convert the getter and setter into ordinary methods, so that they do not get called for each change detection cycle.

getJsonString(): string {
    this.loading = false;
    this.cdr.markForCheck();
    return JSON.stringify(this.data, null, '\t');
 }

 setJsonString(data: string) {
    this.data = JSON.parse(data);
 }

Not correct way to call method from DOM, i suggest to create an obs like BehaviorSubject and setter have just to update this one.

protected jsonStringify = new Subject<string>() // or Behavior

 setJsonString(data: string) {
    this.jsonStringify.next(JSON.stringify(JSON.parse(data), null, '\t'));
    this.loading = false;
 }