indexeddb objectstore.add() keypath = 'id'

Question

i have a few object stores, and split things up between them. and during initial install of chrome extension, i am adding data to the various object stores, and i am wanting to make sure the data aligns up correctly. so when things go out of sync during install. the "keypath / id" will match things up correctly. nothing big there.

issue comes in after the initial install. and adding another record. and the "id" / keyPath / key for initial records are showing id:1, id:2, id:3, etc...

but for a record after initial install. i no longer know what the key will be until it is added to the objectstore. is there a code snip i am missing so i can create an object and add to objecstore, to also up the id, or did i mess up originally creating id: 1 and should of used something like keyPath: 1 or key: 1 or Primarykey: 1?

i can take long way around it, and use some promises, and

objectstore.add(object)
.then(objecstore.get(event.key) 
.then(objestore.put(key, {"id":key})

i do note remember correct promise code to above. but objectstore.add, then getting key once added, then .put({"id": key}) to update "id" is done, is the jist of it. i am trying to prevent ever needing to do this in the first place.

kinda like in SQL like database, and having 2 primarykeys that are numbers, autoinncrement, and are exactly same in every way for the same table. but in my case, keys update, and "id" is taking up space. and not sure how to remove 'id' from initial get go. Or once done, how to keep keys and 'id' synced without a bunch of extra blah promises.

comments in below code, trying to figure it out. and no success as of yet figuring it out myself

    const ms_master = [{
//========================
//did i mess up here in creating id: and should of used like keypath:1?
//========================
      "id": 1,
      "baseurl": "www.example1.net",
      "prefix": "ex1",
      "name": "tryout1",
    }, {
      "id": 2,
      "baseurl": "www.something.com",
      "prefix": "so",
      "name": "some some",
    }, {
      "id": 3,
      "baseurl": "woops.org",
      "prefix": "woo",
      "name": "arghs",
    }]

    var db;
    var request = window.indexedDB.open("mystyle", 1);
    request.onerror = function(event) {
      console.log("error: ")
    };
    request.onsuccess = function(event) {
      db = event.target.result;
      console.log("success: " + db);
    };
    request.onupgradeneeded = function(event) {
        var db = event.target.result;
        if (!db.objectStoreNames.contains("ms_master")) {
//========================
//did i mess up here in creating the store?
//========================
          var objectStore = db.createObjectStore("ms_master", {
            keypath: "id",
            autoIncrement: true,
            unique: true
          });
          objectStore.createIndex("baseurl", "baseurl", {
            unique: false
          });
          objectStore.createIndex("prefix", "prefix", {
            unique: false
          });
          objectStore.createIndex("name", "name", {
            unique: false
          });
//========================
//seems to make no difference
//========================
          //objectStore.createIndex("id","id", { unique: true });
          for (var i in ms_master) {
            objectStore.add(ms_master[i]);
          }
//========================
//once added, should i do a objecstore.get and grab data, then do a objectstore.put that does not have 'id" in it?
//========================
        }

        $(document).ready(function() {
              document.getElementById('ms_table_add').addEventListener("click", ms_table_add);
            }

            function ms_table_add() {
              var db;
              var request = indexedDB.open('mystyle', 1);
              request.onsuccess = function(e) {
                db = e.target.result;
                var transaction = db.transaction('ms_master', "readwrite");
                var objectStore = transaction.objectStore('ms_master');
                var myobj = [
                  "id",
                  "name",
                  "prefix",
                  "baseurl"
                ];
                var myarray = {};
                for (var h = 0; h < myobj.length; h++) {
                  if (h == 0) {
//========================
//am i not getting the correct code to get id and keypath to sync up?
//========================
                    //{name: 'ms_master', keyPath: 'id'}
                    //myarray[myobj[h]] = 'id';
                  } else {
                    var temp = document.getElementById('ms_table_add_' + myobj[h]).value;
                    if (typeof temp !== "undefined" && temp !== null && temp !== "") {
                      myarray[myobj[h]] = temp;
                    }
                  }
                }
                objectStore.add(myarray);
//==============================
//trying to avoid extra promises to add, then get key, then update id here.
//==============================

                document.getElementById("ms_listings_master_add").innerHTML = "";
              }
            }

            function site_adding() {
              //function that builds up a html form / textareas / inputs and .innerhtml into 
              //<div id="ms_listings_master_add"></div>
            }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <button id="site_adding">add a site</button>
    </br>
    <div id="ms_listings_master_add"></div>

Please post details as concise as possible.

Rax Weber
– Rax Weber

2016-10-11 08:49:07 +00:00
Commented Oct 11, 2016 at 8:49 — Rax Weber
– Rax Weber, Commented Oct 11, 2016 at 8:49

Joshua Bell · Accepted Answer · 2020-07-13 16:45:18Z

9

You're using two features together - in-line keys and key generators. I'll explain them both separately then how they compose.

In-Line and Out-of-Line Keys

In-line keys have the key value appear in the record itself - a store with a keyPath uses in-line keys. By contrast, out-of-line keys have the key value separate.

var storeWithOutOfLineKeys = db.createObjectStore('s1');
storeWithOutOfLineKeys.put({name: 'alice'}, 1);

var storeWithInLineKeys = db.createObjectStore('s2', {keyPath: 'id'});
storeWithInLineKeys.put({name: 'bob', id: 1});

Calls to put() and add() will fail if you don't supply an explicit key for a store with out-of-line keys. Calls to put() and add() will fail if you do supply an explicit key to a store with in-line keys, and will fail if the record does not contain the in-line key value (e.g. missing the id property in the above example)

Key Generators

When you specify autoIncrement: true you're using what the spec calls a key generator. For each record added, if not specified otherwise then the first will get 1, the second 2, etc. You can find out what key was used by looking at the result of the put() or add() request, e.g.

var request = store.put({name: 'alice'});
request.onsuccess = function() {
  console.log('put got generated key: ' + request.result;
};

Both In-Line Keys and Key Generators

When a key generator is used, the behavior of add() and put() change:

Key generator and out-of-line keys: it is not necessary to pass an explicit key when calling add() or put(); if omitted, the generated key is used:

var storeWithOutOfLineKeys = db.createObjectStore('s1', {autoIncrement: true});
storeWithOutOfLineKeys.put({name: 'alice'});

If an explicit key is passed it will be used, either overwriting a previous record or adding a new one. (If the key passed happens to be a number higher than the generator value, the generator will be set to that number.)

Key generator and in-line keys: it is not necessary to specify the key in the record when calling add() or put(); if omitted, the generated key is injected into the value.

var storeWithInLineKeys = db.createObjectStore('s2', {keyPath: 'id', autoIncrement: true});
storeWithInLineKeys.put({name: 'bob'}).onsuccess = function(e) {
  var id = e.target.result;
  storeWithInLineKeys.get(id).onsuccess = function(e) {
    console.log(JSON.stringify(e.target.result));
    // {"name": "bob", "id": 1}
  });
});

Similarly though, if the record does contain a key value it will be used instead. (And if it's a number higher than the key generator state, the key generator will be adjusted.)

I believe this last case matches what your code is doing - both in-line keys and a key generator. You can use the result of add() and put() requests to determine the key that was added, and update records by specifying the key explicitly in the record:

storeWithInLineKeys.put({name: 'eve', id: 1}); // overwrites old #1

edited Jul 13, 2020 at 16:45

answered Oct 11, 2016 at 18:13

Joshua Bell

8,48531 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ryan Sanders Over a year ago

in your last codesnip storeWithInLineKeys.put({name: 'eve', id: 1});

Ryan Sanders Over a year ago

is there a storeWithInLineKeys.put({name: 'eve', key: 1}); or storeWithInLineKeys.put({name: 'eve', keypath: 1}); or storeWithInLineKeys.put({name: 'eve'}, 1}); so i can remove 'id' all together when working with initial adding data to indexeddb? so all i would need to have is "autoIncrement: true" vs {keyPath: 'id'}

Joshua Bell Over a year ago

Slow down and ask clear questions. Do you want in-line keys or out-of-line keys? Do you want a key generator or are you going specify your own keys? Ask yourself both of those questions, answer them to yourself, then re-read my response.

Sever van Snugg Over a year ago

Thanks for your really great explanation. I banged my head around this! But I think there is one mistake at the end: var storeWithInLineKeys = db.createObjectStore('s2', {keyPath: 'id'}); shoult be var storeWithInLineKeys = db.createObjectStore('s2', {keyPath: 'id', autoincrement: true}); That the autoincrement is working, doint so solves my issue!

Joshua Bell Over a year ago

Good catch - fixed the example!

Community · Accepted Answer · 2017-05-23 11:54:34Z

this is what i was looking for ((from How do I specify key when adding records to objectStore w/ in IndexedDB?)) combined with your post Joshua Bell. it clicked :) thank you!

objectStore.add({name: "myData"}, 47);

i need to restructure below, so i can remove 'id' itself completely, and still have key notation # 47 in above text.

const ms_master = [{
      "id": 1,
      "baseurl": "www.example1.net",
      "prefix": "ex1",
      "name": "tryout1",
    }, {
      "id": 2,
      "baseurl": "www.something.com",
      "prefix": "so",
      "name": "some some",
    }, {
      "id": 3,
      "baseurl": "woops.org",
      "prefix": "woo",
      "name": "arghs",
    }]

1st example of yours

var storeWithOutOfLineKeys = db.createObjectStore('s1');
storeWithOutOfLineKeys.put({name: 'alice'}, 1);

4th example of yours

var storeWithOutOfLineKeys = db.createObjectStore('s1', {autoIncrement: true});
storeWithOutOfLineKeys.put({name: 'alice'});

new doing...

var storeWithOutOfLineKeys = db.createObjectStore('s1', {autoIncrement: true});
//for initial putting data into indexeddb (during install of chrome extension)
storeWithOutOfLineKeys.add({name: 'alice'}, 1);
//for adding data at a later time
storeWithOutOfLineKeys.add({name: 'alice'});
//for updating something...
storeWithOutOfLineKeys.put({name: 'alice'}, 1);

Collectives™ on Stack Overflow

indexeddb objectstore.add() keypath = 'id'

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related