Issues with serialisation of nested grid, getting error.

[sc17j2h]

Subject of the issue

Serialisation of regular grids seem to be working fine, but getting errors with grid.save(true,true) when trying to work with nested grids. I have a grid that has regular items and also an item with a nested grid in it, and this is where the issue occurs.

Your environment

Version of gridstack.js: 3.3.0 using HTML5
Which browser and its version: Chrome, version 89.0.4389.90

Steps to reproduce

My project is quite big and is an electron application so tried to make the most basic version of this issue with the provided demos: https://jsfiddle.net/scj2h/1od4e27m/18/
While trying to get this working, I have attempted many different approaches. Without grid.save(true,true) I can't save the nested grids.

Repro steps:

1. Press the 'Save Grid' button. On jsfiddle it just says script error but running locally I get the error detailed in the 'Actual behaviour' section.

Expected behavior

Serialisation of grids and their subgrids.

Actual behavior

Following error occurs when serialising a grid with a nested grid inside it:

Uncaught TypeError: Cannot read property '0' of undefined
    at Function.removeInternalAndSame (utils.ts:232)
    at a.save (gridstack.ts:474)
    at gridstack.ts:462
    at Array.forEach (<anonymous>)
    at a.save (gridstack.ts:460)
    at saveFullGrid (layoutCreator.html:68)
    at HTMLAnchorElement.onclick (VM273 layoutCreator.html:27)

Slightly related issue
When I have a regular grid with no nested grids and use grid.save(true, true), it appears to serialise correctly and prints out the serialised JSON of the grid. If I then dynamically add an identical item to the ones already on the grid to the grid, I get the error below and the new item can't be dragged.

Uncaught TypeError: Cannot read property 'substring' of undefined
    at new n (dd-draggable.ts:70)
    at n.setupDraggable (dd-element.ts:57)
    at gridstack-dd-native.ts:59
    at Array.forEach (<anonymous>)
    at l.draggable (gridstack-dd-native.ts:50)
    at a.r.GridStack._prepareDragDropByNode (gridstack-dd.ts:510)
    at a._prepareElement (gridstack.ts:1239)
    at addWidget (gridstack.ts:427)
    at addItem (layoutPrototype.js:40)
    at HTMLButtonElement.onclick (layoutCreator.html:22)

There is no issue at all with saving and loading with grid.save() and grid.load() with these simple grid items.

I appreciate that this might not be a bug and simply user error, but is there a way to save a grid that holds both nested and non-nested items, and still allow for editing of that grid? I can't seem to figure it out. Many thanks for your time.

[adumesny]

yep, looks like a bug. will update the demo with a save to debug and fix it. thanks!

[adumesny]

fix in upcoming 4.0.1 - don't forget to contribute if you find lib useful!

[EmpireofKings]

@adumesny

Here you go bossman,

I too had trouble stringifying the nested json objects....

Luckily i found a band-aid until 4.0.1 is out. I just added a 'JSON.pruned' function that i found on stack overflow.

[ I had to upload it as a txt file, git wont allow html files in comments :( ]

nested.txt

[adumesny]

@EmpireofKings that above fix has long been released... but I found another issue with extra node info being saved. filed a ticket for it #1782

but not sure why you can't stringnify the results... of course you will need to NOT HAVE the DOM div (that has nested pointer and is internal to browser), this this works fine

    save = function() {
      json = grid.save(false, true);
      console.log(json);
      console.log(JSON.stringify(json));
    }