title: indexeddb objectstore.add() keypath = 'id'
body: <p>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.</p>
  
  <p>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...</p>
  
  <p>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?</p>
  
  <p>i can take long way around it, and use some promises, and </p>
  
  <pre><code>objectstore.add(object)
  .then(objecstore.get(event.key) 
  .then(objestore.put(key, {"id":key}) 
  </code></pre>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>comments in below code, trying to figure it out. and no success as of yet figuring it out myself</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    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 &lt; 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" &amp;&amp; temp !== null &amp;&amp; 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 
                //&lt;div id="ms_listings_master_add"&gt;&lt;/div&gt;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;button id="site_adding"&gt;add a site&lt;/button&gt;
      &lt;/br&gt;
      &lt;div id="ms_listings_master_add"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>