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

Share Improve this question Follow edited Nov 18, 2024 at 12:27 JSON Derulo 18k1111 gold badges5757 silver badges7575 bronze badges asked Nov 18, 2024 at 10:56 AskyyAskyy 1911 bronze badge

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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