Cannot read properties of undefined (reading 'map')

[ethanfox]

I'm using Supabase to query data to load into a table but I keep getting this error: Cannot read properties of undefined (reading 'map')

Data Model

[
  {
    "name": "Partner",
    "permissions": [

      {
        "can_add_members": false,
        "can_delete_members": false,
        "can_edit_members": false,
        "can_create_roles": false,
        "can_delete_roles": false,
        "can_edit_roles": false,
        "can_assign_roles": false,
        "can_create_projects": false,
        "can_delete_projects": false,
        "can_edit_projects": false,
        "can_publish_projects": false,
        "can_view_projects": false,
        "can_assign_members_to_projects": false
      }
    ]
  },
  {
    "name": "Associate Partner",
    "permissions": [
      {
        "can_add_members": false,
        "can_delete_members": false,
        "can_edit_members": false,
        "can_create_roles": false,
        "can_delete_roles": false,
        "can_edit_roles": false,
        "can_assign_roles": false,
        "can_create_projects": false,
        "can_delete_projects": false,
        "can_edit_projects": false,
        "can_publish_projects": false,
        "can_view_projects": false,
        "can_assign_members_to_projects": false
      }
    ]
  },
  {
]

Code

 const roleArray = writable([])
             onMount(() => {
             getPermissions()    
             });
   // TABLE CODE
    const table = createTable(roleArray);
    const columns = table.createColumns([
    table.column({
    header: 'Name',
    accessor: 'name',
     }),

    ]);

    const {
    headerRows,
    rows,
    tableAttrs,
    tableBodyAttrs,
     } = table.createViewModel(columns);

    // GET PERMISSIONS FROM SUPABSE
        async function getPermissions(){
        const { data: firm, error } = await supabaseClient
        .from('firms')
        .select('role_permissions')
        .eq('id',$userOrgID)

        if (firm){
           // console.log(JSON.stringify(firm, null, 2))
            const [fetchedUser] = firm;
            //console.log(fetchedUser.role_permissions)
            roleArray.set(fetchedUser.role_permissions)
            console.log($roleArray)

        } else{
            console.log("Error fetching permissions", error)
        }
    }

[ethanfox]

For whatever reason, there is no error now. However, I am having trouble showing the nested properties: "permissions" in the table. It is currently showing as [object Object]

[bryanmylee]

Hey @ethanfox, by default each table cell simply renders the data property as is.

<td>
{/* whatever the value of `item.permissions` */}
</td>

Since permissions is an array object, it will show up as [object Object].

To customize the rendering behaviour, you can look at cell of the column definition.

<script>
  const table = createTable(roleArray);
  const columns = table.createColumns([
    table.column({
      header: 'Name',
      accessor: 'name',
    }),
    table.column({
      header: 'Permissions',
      accessor: 'permissions',
      cell: ({ value }) => JSON.stringify(value), // however you want to customize the row
    }),
  ]);

  const {
    headerRows,
    rows,
    tableAttrs,
    tableBodyAttrs,
  } = table.createViewModel(columns);
</script>

Although, take note that each data item only shows up as one row. If you want multiple rows instead for each property, take a look at addSubRows and addExpandedRows.

Note that you'll have to modify the data format a bit to make it work though, but I can work on a more detailed example if you have any further troubles

[bryanmylee]

Let me know if there's any further issues! @ethanfox