"Error: missing 'id' property for item" on RXDB object with inherited id property

[byw]

Hi there,

I'm getting this error when the items in use:dndzone is an array of RXDB objects rather than POJO.

The error is:

action.js:70 Uncaught (in promise) Error: missing 'id' property for item {
  "id": "99f310e6-bc82-44df-b3d5-26e80dc3cfd5",
  "title": "add ability to delete",
  "today": false,
  "important": false,
  "urgent": false,
  "createdAt": "2023-08-12T20:04:49.692Z",
  "updatedAt": "2023-08-12T20:04:49.692Z",
  "completedAt": "2023-08-13T09:33:04.742Z"
}
    at validateOptions (action.js:70:15)
    at update (action.js:33:13)
    at Object.update [as p] (ItemsList.svelte?t=1691977992627:204:107)
    at update (scheduler.js:119:30)
    at flush (scheduler.js:79:5)

Looking at action.js, it seems to be using .hasOwnProperty to determine if the id property exists.

    const itemWithMissingId = items.find(item => !{}.hasOwnProperty.call(item, ITEM_ID_KEY));
    if (itemWithMissingId) {
        throw new Error(`missing '${ITEM_ID_KEY}' property for item ${toString(itemWithMissingId)}`);
    }

Looking at the doc for hasOwnProperty, it seems to only return true for its own property, but not inherited ones.

I tried myRxdbObj.hasOwnProperty('id') and it returns false - could be because it's inherited. But myRxdbObj.id does in fact exist.

Would the id have to be its own property as opposed to inherited? I tried 'id' in myRxdbObj (for both inherited and own) and it returns true.

[isaacHagoel]

Nice catch. Would you like to create a PR?

On Mon, Aug 14, 2023 at 12:09 PM Bobby Wang @.***> wrote:

The error is:

action.js:70 Uncaught (in promise) Error: missing 'id' property for item { "id": "99f310e6-bc82-44df-b3d5-26e80dc3cfd5", "title": "add ability to delete", "today": false, "important": false, "urgent": false, "createdAt": "2023-08-12T20:04:49.692Z", "updatedAt": "2023-08-12T20:04:49.692Z", "completedAt": "2023-08-13T09:33:04.742Z" } at validateOptions (action.js:70:15) at update (action.js:33:13) at Object.update [as p] (ItemsList.svelte?t=1691977992627:204:107) at update (scheduler.js:119:30) at flush (scheduler.js:79:5)

Looking at action.js, it seems to be using .hasOwnProperty to determine if the id property exists.

const itemWithMissingId = items.find(item => !{}.hasOwnProperty.call(item, ITEM_ID_KEY));
if (itemWithMissingId) {
    throw new Error(`missing '${ITEM_ID_KEY}' property for item ${toString(itemWithMissingId)}`);
}

Looking at the doc https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty for hasOwnProperty, it seems to only return true for its own property, but not inherited ones.

I tried myRxdbObj.hasOwnProperty('id') and it returns false - could be because it's inherited. But myRxdbObj.id does in fact exist.

Would the id have to be its own property as opposed to inherited? I tried 'id' in myRxdbObj and it returns true.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/471, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC6QT6RC5IPCOHB5CVLXVGCEXANCNFSM6AAAAAA3PBX6WM . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[byw]

Hmm, looks like even with this line fixed, I'm still getting another error in the finalize handler after dragging.

util.js:6 Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'SafeSubscriber2'
    |     property '_finalizers' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'Subscription2'
    --- property '_parentage' closes the circle
    at JSON.stringify (<anonymous>)
    at toString (util.js:6:17)
    at validateOptions (action.js:70:71)
    at update (action.js:33:13)
    at Object.update [as p] (ItemsList.svelte:49:17)
    at update (scheduler.js:119:30)
    at flush (scheduler.js:79:5)

Not sure why this is happening. 🤔 The finalize handler is pretty straightforward:

  let items: ItemDocument[] = []

  ...

  function handleFinalize(e: CustomEvent<DndEvent<ItemDocument>>) {
    items = e.detail.items
  }

  ...

  <div use:dndzone={{items, flipDurationMs: 300}} on:finalize={handleFinalize}>

[isaacHagoel]

hi, sorry for the delay. i figured it has something to do with the shape of your item objects. did u have a chance to investigate further?