1
resposta

Failed to execute 'add' on 'IDBObjectStore': The object store

    class NegociacaoController {
    constructor() {  
        let $ = document.querySelector.bind(document);
        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');

        this._listaNegociacoes = new Bind(
            new ListaNegociacoes(), 
            new NegociacoesView($('#negociacoesView')), 
            'adiciona', 'esvazia' , 'ordena', 'inverteOrdem');

        this._mensagem = new Bind(
            new Mensagem(), new MensagemView($('#mensagemView')),
            'texto');    

        this._ordemAtual = '';

        ConnectionFactory
            .getConnection()
            .then(connection => new NegociacaoDao(connection))
            .then(dao => dao.listaTodos())
            .then(negociacoes => 
                negociacoes.forEach(negociacao => 
                    this._listaNegociacoes.adiciona(negociacao)))
            .catch(erro => {
                console.log(erro);
                this._mensagem.texto = erro;
            });            
    }

    adiciona(event) {

        event.preventDefault();

        ConnectionFactory
            .getConnection()
            .then(connection => {

                let negociacao = this._criaNegociacao();

                new NegociacaoDao(connection)
                    .adiciona(negociacao)
                    .then(() => {
                        this._listaNegociacoes.adiciona(negociacao);
                        this._mensagem.texto = 'Negociação adicionada com sucesso'; 
                        this._limpaFormulario();                         
                    })
            })
            .catch(erro => this._mensagem.texto = erro);

    }

    importaNegociacoes() {


        let service = new NegociacaoService();
        service
            .obterNegociacoes()
            .then(negociacoes => negociacoes.forEach(negociacao => {
                this._listaNegociacoes.adiciona(negociacao);
                this._mensagem.texto = 'Negociações do período importadas'   
            }))
            .catch(erro => this._mensagem.texto = erro);                              
    }

    apaga() {

        ConnectionFactory
            .getConnection()
            .then(connection => new NegociacaoDao(connection))
            .then(dao => dao.apagaTodos())
            .then(mensagem => {
                this._mensagem.texto = mensagem;
                this._listaNegociacoes.esvazia();
            });
    }
class NegociacaoDao {

    constructor(connection) {

        this._connection = connection;
        this._store = 'negociacoes';
    }

    adiciona(negociacao) {

        return new Promise((resolve, reject) => {

            let request = this._connection
                .transaction([this._store],"readwrite")
                .objectStore(this._store)
                .add(negociacao)

            request.onsuccess = e => {

                resolve();
            };

            request.onerror = e => {

                console.log(e.target.error);
                reject('Não foi possível adicionar a negociação');

            };

        });
    }

    listaTodos() {

        return new Promise((resolve, reject) => {

            let cursor = this._connection
                .transaction([this._store], 'readwrite')
                .objectStore(this._store)
                .openCursor();

            let negociacoes = [];

            cursor.onsuccess = e => {

                let atual = e.target.result;

                if(atual) {

                    let dado = atual.value;

                    negociacoes.push(new Negociacao(dado._data, dado._quantidade, dado._valor));

                    atual.continue();

                } else {

                    resolve(negociacoes);
                }

            };

            cursor.onerror = e => {

                console.log(e.target.error);
                reject('Não foi possível listar as negociações');
            };

        });
    }
    apagaTodos() {
        return new Promise((resolve, reject) => {

            let request = this._connection
                .transaction([this._store], 'readwrite')
                .objectStore(this._store)
                .clear();
            request.onsuccess = e => resolve('Negociações apagadas com sucesso');
            request.onerror = e => {
                console.log(e.target.error);
                reject('Não foi possível apagar as negociações');
            };
        });
    }
}

mensagem de erro no console do navegador : Uncaught (in promise) DOMException: Failed to execute 'add' on 'IDBObjectStore': The object store uses out-of-line keys and has no key generator and the key parameter was not provided.

1 resposta

Olá José, tudo bem com você?

Peço desculpas pela demora no retorno.

O erro que está aparecendo no console do navegador se refere ao fato de que a chave primária da store criada no banco IndexedDB não está sendo gerada automaticamente. Para resolver isso, será necessário definir a propriedade autoIncrement como True para a chave primária ser criada automaticamente e incrementada automaticamente. A declaração da criação da store ficará da seguinte forma:

connection.createObjectStore(store, { autoIncrement: true });

Peço que siga os passos apresentados abaixo para realizar a modificação do código:

  • No arquivo ConnectionFactory.js localize o método createStore da classe ConnectionFactory e deixe-o como apresentado abaixo, adicionando a propriedade autoIncrement

      static _createStore(connection) {
    
          stores.forEach(store => {
    
              if (connection.objectStoreNames.contains(store))
                  connection.deleteObjectStore(store);
    
              connection.createObjectStore(store, { autoIncrement: true });
    
          });
      }
  • Salve o arquivo ConnectionFactory.js

  • Feita essas mudanças, inicie a aplicação, executando o comando npm start no terminal aberto na pasta server

  • Abra a aplicação no navegador e no painel de desenvolvedor (F12). Acesse a aba Aplication, e verifique a versão atual da store. Como mostrado na imagem abaixo:

    Imagem contendo a exibição do painel de desenvolvedor do navegador exibindo a versão da store criada.

  • Abra novamente o arquivo ConnectionFactory.js, e na constante verssion atribua um valor maior do que a versão atual da store, dessa forma as mudanças serão aplicadas

  • Salve o arquivo ConnectionFactory.js

  • Abra a aplicação no navegador, atualize a página e realize a adição de uma negociação

Peço que siga os passos apresentados acima e verifique o resultado apresentado.

Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software