The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

List Items In An IndexedDB Database

TODO: Pull subtitle into page object

NOTE

After writing this I found:

which I'm experimenting with and looks like I'll be using:

See The Stuff

This is how I'm getting a list of all the items for a specific data store in an IndexedDB database. Check the console for the output

Notes

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

List Items In An IndexedDB Database

-- h2

NOTE

After writing this I found:

>https://github.com/jakearchibald/idb>https://github.com/jakearchibald/idb>

which I'm experimenting with and looks like
I'll be using:


-- h2
-- class: subtitle

See The Stuff

This is how I'm getting a list of all the 
items for a specific data store in an
IndexedDB database. Check the console for
the output

-- script
-- type: show


let db

const DB_NAME = "Example_List_Items"
const DB_VERSION = 56
const DB_STORE_NAME = `widgets${DB_VERSION}`
const DB_STORE_KEY = "id"

const addItems = () => {
  console.log("adding items")
  const items = [
    { id: "alfa" }, 
    { id: "bravo" }, 
    { id: "charlie" },
    { id: "delta" },
  ]
  const transaction = db.transaction(DB_STORE_NAME, "readwrite")
  const objectStore = transaction.objectStore(DB_STORE_NAME)
  items.forEach((item) => {
    console.log(item)
    const request = objectStore.add(item)
    request.onerror = (event) => {
      console.error(event.target.error)
    }
  })
}

const listItems = () => {
  const objectStore = db.transaction(DB_STORE_NAME).objectStore(DB_STORE_NAME);
  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      console.log(`Widget: ${cursor.key}`)
      console.log(cursor.value)
      cursor.continue()
    }
  }
}

const populateProcess = () => {
  const openRequest = indexedDB.open(DB_NAME, DB_VERSION)
  openRequest.onblocked = (event) => {
    console.error("ERROR: Other tabs migth be open with the DB");
  };
  openRequest.onsuccess = (event) => {
    db = event.target.result
    listItems()
  }
  openRequest.onupgradeneeded = (event) => {
    db = event.target.result
    const objectStore = db.createObjectStore(DB_STORE_NAME, { keyPath: DB_STORE_KEY});
    objectStore.transaction.oncomplete = () => {
      addItems()
    }
  }
}

document.addEventListener("DOMContentLoaded", async () => {
  populateProcess()
})


-- notes

- This page populates the data so there's something 
to list

- The main focus of this page is the `listItems`` function
that expects a `db`` variable to be available with
an open database connection

- Took a while to figure this one out. I'm still 
a yellow belt with IndexedDB so feel free to check
my work

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
-- title: Using IndexedDB - MDN

This post has a lot in it, but it's structure didn't work 
very well for me. I've had to pull things out
and make my own examples to figure out how things
work

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/API/IDBOpenDBRequest
-- title: IDBOpenDBRequest - MDN

Docs about the connection for an IndexedDB. I was trying
to figure out if `.success()`` is called after `.upgradeneeded()``.
I didn't see that in the docs, but that seems to be
how things are working with the code


-- ref
-- url: https://github.com/mdn/dom-examples/blob/main/indexeddb-api/main.js
-- title: indexeddb-api examples from MDN's GitHub

There's a bunch of stuff in here that I want to look at for
things like how to clear storage. It has `$`` in front of
somethings. Not sure if that means it's jQuery or not. I don't 
see that called, so I'm not sure

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Terminology
-- title: IndexedDB key characteristics and basic terminology

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
-- title: IndexedDB API











-- categories
-- JavaScript 
-- IndexedDB

-- metadata
-- date: 2023-12-30 17:10:44
-- id: 2ahsvrmk
-- site: aws
-- type: post
-- status: draft