IndexedDB: SchemaError when trying to access nested object inside a table

Question

I have an IndexedDB named pos and inside that table named pos_customers. The structure looks like https://i.sstatic.net/ttO2e.jpg

Now my goal is to access phone which is inside billing object. If you look closely, then billing object is nested. So, to access that I wrote this code:

if (search) {
database.table('pos_customers').where("first_name")
.startsWithIgnoreCase(search)
.or('email').startsWithIgnoreCase(search)
.or('billing.phone').startsWithIgnoreCase(search) //throws SchemaError
.toArray().then( (data) => {
    data.forEach(info => {
      for(let key in info) {
        console.log(`${key} ${info.email} ${info.billing.phone}`); //this will work obviously
        }
      }
)}
);

The warning it showed me:

Unhandled rejection: SchemaError: KeyPath billing.phone on object store pos_customers is not indexed.

Yes, I am new to Dexie and read many StackOverflow answers, but couldn’t get anything specific searching for Dexie nested objects.

Thank you in advance

Answer 1

I found a way to do this:

First, make sure the field you're trying to access is indexed properly: (Here billing.phone)

const tables = {
  pos_customers: 'id,first_name,last_name,email,username,billing,billing.phone,shipping,avatar_url,is_true'
}

Now, make sure to upgrade the version by incrementing the version value by +1.

database.version(2).stores( applyFilters( DATABASE_ADD_TABLES_FILTER, tables ) ); //previous version(1)

Now, go to the app on Chrome:

1. Open Developer Tools (Ctrl+Shift+I / Cmd+Option+I)

2. Go to Applications Tab, click on your target database and click on Delete database

3. Hard Refresh the page and try whatever it is that you're trying to achieve.

It should work!