Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
11
respostas

Importar negociações

// CLASSE LISTANEGOCIACOES
class ListaNegociacoes {
  constructor() {
    this._negociacoes = [];
  }
  adiciona(negociacao) {
    this._negociacoes.push(negociacao);
  }
  get negociacoes() {
    return [].concat(this._negociacoes);
  }
  esvazia() {
    this._negociacoes = [];     
  }
}

// CONTROLLER
class NegociacaoController {
    constructor() {
        let $ = document.querySelector.bind(document); // salva o querySelector em $ mantendo a associação à document.

        this._inputData         = $('#data');
        this._inputQuantidade   = $('#quantidade');
        this._inputValor        = $('#valor');

        this._listaNegociacoes  = new Bind(
            new ListaNegociacoes(),
            new NegociacoesView($('#negociacoesView')),
            'adiciona','esvazia'
        );
        this._mensagem = new Bind(
            new Mensagem(), 
            new MensagemView($('#mensagemView')), 
            'texto'
        );        
    }

    adiciona(event) {
        event.preventDefault();

        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._mensagem.texto = 'Negociação adicionada com sucesso.';
        this._limpaFormulario();
    }

    importaNegociacoes() {
        let xhr = new XMLHttpRequest();

        xhr.open('GET', 'negociacoes/semana');

        // CONFIGURAÇÕES
        xhr.onreadystatechange = () => {
            /*
                ESTADOS DE REQUISIÇÕES AJAX

                0: requisição ainda não iniciada
                1: conexão com o servidor estabelecida
                2: requisição recebida
                3: processando requisição
                4: requisição concluída e a resposta está pronta
            */
            if(xhr.readyState == 4) {
                if(xhr.status == 200) {                   
                   JSON.parse(xhr.responseText)
                    .map(objeto => new Negociacao(new Date(objeto.data), objeto.quantidade, objeto.valor))
                    .forEach((obj) => {
                        console.log(obj); // objeto OK
                        this._listaNegociacoes.adiciona(obj); // obj undefined
                    });
                } else {
                   console.log('deu ruim');                    
                }
            }
        };

        xhr.send();
    }

    apaga() {
        this._listaNegociacoes.esvazia();
        this._mensagem.texto = 'Negociações apagadas com sucesso.';
    }

    _criaNegociacao() {
        return new Negociacao(
            DateHelper.textToDate(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value
        );
    }

    _limpaFormulario() {
        this._inputData.value = '';
        this._inputData.focus();
        this._inputQuantidade.value = '1';
        this._inputValor.value = 0.0;
    }
}

Salve galera! Alguém pode dar uma ajuda? No console.log o obj está certo, mas quando é feita a tentativa de adicionar à _listaNegociacoes.adiciona é undefined. Como assim?

11 respostas

Willian Piantkoski,

Você criou essa this._listaNegociacoes? vc Deu um new ou algo do tipo? Essa lista é um tipo classe não é? Se for você precisa instanciar essa variável do tipo classe ListaNegociacoes.

Att. Fabiano Farah

Foi criada sim Fabiano. Já a utilizo para inserir uma nova negociação à lista e ela funciona. Só tem problema nesse caso.

Obrigado!

Você precisa postar o código do seu controller completo, inclusive de ListaNegociacoes.

Ok Flavio. Já editei o código acima com a classe e o controller. Obrigado!

Agora que passa sua classe Negociacao. O código anterior esta ok.

Vi que você mudou o nome do método da classe DateHelper. Não é esse o problema, mas sugiro fazer isso no final. É meio deselegante a gente perder um tempo considerável procurando erros quando eles são resultantes de renomeações que podem ficar faltando. Não parece ser o seu caso, mas aguardo o código Negociacao.

class Negociacao {
  constructor(data, quantidade, valor) {
    this._data = new Date(data.getTime());
    this._quantidade = quantidade;
    this._valor = valor;
    Object.freeze(this);
  }

  get data() {
    return new Date(this._data.getTime());
  }

  get quantidade() {
    return this._quantidade;
  }

  get valor() {
    return this._valor;
  }

  get volume() {
    return this._quantidade * this._valor;
  }
}

Segue o código da classe Negociação

Wilian, estou achando que você omitiu sem querer alguma mensagem importante de erro.

Vou pedir para você executar novamente sua aplicação, ir no console do Chrome e colar a mensagem de erro, mesmo que gigante para mim.

Se tiver repositório de git e quiser compartilhar o endereço do seu projeto seria ideal.

Pode ficar tranquilo que mais de 700 pessoas já passaram dessa parte sem problema algum. Vamos descobrir, estou curioso.

Aguardo o código de erro completo.

Este é o erro do console.

/*
Uncaught TypeError: Cannot read property 'getDate' of undefined
    at Function.dateToText (http://localhost:3000/js/app/helpers/DateHelper.js:7:19)
    at model.negociacoes.map.n (http://localhost:3000/js/app/views/NegociacoesView.js:21:32)
    at Array.map (native)
    at NegociacoesView.template (http://localhost:3000/js/app/views/NegociacoesView.js:19:31)
    at NegociacoesView.update (http://localhost:3000/js/app/views/View.js:11:37)
    at Bind.ProxyFactory.create.model (http://localhost:3000/js/app/helpers/Bind.js:3:65)
    at Proxy.<anonymous> (http://localhost:3000/js/app/service/ProxyFactory.js:8:28)
    at JSON.parse.map.forEach (http://localhost:3000/js/app/controllers/NegociacaoController.js:52:48)
    at Array.forEach (native)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/js/app/controllers/NegociacaoController.js:50:22)
*/

e aqui o repositório: https://github.com/wjpiantkoski/js6

solução!

Agora sim! :) O problema esta no seu template, de NegociacoesView.

 <tbody>
          ${model.negociacoes.map(n => `
            <tr>
              <td>${DateHelper.dateToText(n.date)}</td>
              <td>${n.quantidade}</td>
              <td>${n.valor}</td>
              <td>${n.volume}</td>
            </tr>
          `).join('')}
        </tbody>

Você esta fazendo n.date, o correto é n.data.

Putz, é verdade! Eu tinha deixado todos como date, mas mudei para data e esqueci desse cara. Valeu Flavio. Agradeço muito a atenção!