IndexedDB Manipulation with Dexie — Iteration, Filtering, and First and Last Value

IndexedDB is a way to store data in the browser.

It lets us store larger amounts of data than local storage in an asynchronous way.

Dexie makes working with IndexedDB easier.

In this article, we’ll take a look at how to start working with IndexedDB with Dexie.

Loop Through Each Primary or Unique Key

We can loop through each primary or unique with the eachUniqueKey method.

For example, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  await db.friends
    .orderBy('name')
    .eachUniqueKey(name => console.log(name));
})()

We call eachUniqueKey after calling orderBy with 'name' to get the name value of each entry.

Filter Objects

We can filter objects in a collection with the filter method.

For instance, we can use it by writing:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const someFriends = await db.friends
    .orderBy('name')
    .filter(({
      age
    }) => age > 76)
    .toArray();
  console.log(someFriends)
})()

We create 2 entries in the friends table.

Then we query the friends table.

And then we call filter with the condition we want to return the items with the given condition.

Get the First Item in a Collection

We can use the first method to get the first item in a collection.

For example, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const someFriend = await db.friends
    .orderBy('name')
    .first()
  console.log(someFriend)
})()

first returns a promise with the first item in the result collection, so we get:

{id: 1, name: "jane", age: 78}

in the console log.

Get All Keys of the Collection

We can get all the keys of a collection with the keys method.

For instance, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const someFriends = await db.friends
    .orderBy('name')
    .keys()
  console.log(someFriends)
})()

We dcall orderBy with 'name' , so we get all the values of name in the database from the returned promise.

Therefore, we get:

["jane", "mary"]

in the console log.

Get the Last Item from a Collection

The last method letsus get the last item from a collection.

For instance, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const someFriends = await db.friends
    .orderBy('name')
    .last()
  console.log(someFriends)
})()

We sorted the results by their name value.

Then we call last to get the last item from the collection.

So we get:

{id: 2, name: "mary", age: 76}

logged in the console.

Conclusion

We can loop throygh items in collections, filter them, or get the first or last item from an IndexedDB collection with Dexie.