search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

The EventData does not allow reference to parent object (fails with 'Converting circular structure to JSON')

Asked by Octave
2 months ago.

First, thanks for amazing and flexible lib.

————

The library serializes the EventData with JSON.stringify at some point of the detectChangesInView.

If the user code has backward reference to user objectn from EventData, the serialisation will obviously fails with ‘Converting circular structure to JSON).

Here is a minimal example. I have whatever custom class, that has a link to your EventData. My object hierarchy maintain some reference to your events.

My questions

  1. Could you please have a look at the reason serialisation is performed.

  2. If it is not strictly required, please get rid of it to overcome this annoying limitation.

Here is a minimal example to reproduce


export class MyClass {
  eventData: EventData;
}

From the onMove, onResize, … handlers I want to be able to access my objects to trigger some actions. So I keep a reference to myObject.

myObject : MyObject = new MyObject();

const eventData : DayPilot.EventData={
  id: 'id',
  start: '2024-02-10T...',
  end:  '2024-02-10T...',
  resource: '...',
  text: '...',

  // parent
  myObject: myObject as MyClass
} as DayPilot.EventData


myObject.eventData=eventData;

Upon detectChangesInView, your component invoke JSON.stringify, which fails with cycle detection.

core.mjs:10614 ERROR TypeError: Converting circular structure to JSON

--> starting at object with constructor 'Object'

|     property 'myObject' -> object with constructor 'Object'

--- property '…..' closes the circle

at JSON.stringify (<anonymous>)

  at optHash (daypilot-pro-angular.mjs:11175:17)

  at DayPilotSchedulerComponent.updateOptions (daypilot-pro-angular.mjs:11593:20)

  at DayPilotSchedulerComponent.ngDoCheck (daypilot-pro-angular.mjs:11563:14)

  at callHookInternal (core.mjs:4024:14)

  at callHook (core.mjs:4055:9)

  at callHooks (core.mjs:4006:17)

  at executeCheckHooks (core.mjs:3937:5)

  at refreshView (core.mjs:13507:21)

  at detectChangesInView (core.mjs:13663:9)

Any help would be appreciated,

Best regards,

Octave

Answer posted by Dan Letecky [DayPilot]
2 months ago.

The JSON serialization is necessary for Angular change detection. Circular references would also prevent any other change detection mechanism based on event comparison from working.

To avoid this issue, load the events using the direct API. This will also improve performance for large data sets. Read more at the Angular Scheduler Performance docs page.

I would try to avoid circular references in either case - it’s very easy to create a memory leak this way. The event data objects should be kept as simple as possible.

You can break the circular references by creating a hashmap with an event id as a key and store only the id with events instead of the full reference.

Comment posted by Octave
2 months ago.

Understood! I moved to the id/object map.

Thanks for advice.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.