Using arrays as indexedDB keyPaths in IE 10/11

Question

I have an array as my keypath using indexedDB and it works fine with Chrome and Firefox, but when I try to add/put using IE it gives me a DataError.

var request = window.indexedDB.open("MyTestDatabase");

request.onsuccess = function(event) {
    var database = event.target.result;
    var transaction = database.transaction(["document"], "readwrite");
    var objectStore = transaction.objectStore("document");
    var request = objectStore.put({title: 'MyDoc', version: 0});
    request.onsuccess = function() {
        console.log('document added');
    };
    request.error = function(error) {
        console.log(JSON.stringify(error));
    };                
    transaction.oncomplete = function() {
        console.log('transaction complete');
    };
    transaction.onerror = function(error) {
        console.log(JSON.stringify(error));
    };
};

request.onupgradeneeded = function(event) {
    event.target.result.createObjectStore("document", {keyPath: ['title', 'version']});
};

Error Screenshot:

How can I keep my double keyPath and get it to work with IE?

Answer 1

The only way to get around this at the moment is to create a string out of the array and use it at the key as Kyaw mentioned.

request.onupgradeneeded = function(event) {
    event.target.result.createObjectStore("document", {keyPath: ['id']});
};

The id in the example would now have to be a concatenated string containing the title and version. Some like: MyDoc_0. You'd still store the title and version fields though so you can easily access them without have to split the id string.