Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro em Update da classe NegociacoesView

Boa tarde,

Estou tendo o seguinte erro no update da classe NegociacoesView:

Uncaught TypeError: Cannot read property 'getDate' of undefined
    at Function.dataParaTexto (file:///D:/Natanael/Desktop/Alura/11%20-%20Javascript%20Avan%C3%A7ado%20I%2…%B5es%20de%20projetos/aluraframe/client/js/app/helpers/DateHelper.js:10:24)
    at model.negociacoes.map.n (file:///D:/Natanael/Desktop/Alura/11%20-%20Javascript%20Avan%C3%A7ado%20I%2…es%20de%20projetos/aluraframe/client/js/app/views/NegociacoesView.js:24:42)
    at Array.map (native)
    at NegociacoesView._template (file:///D:/Natanael/Desktop/Alura/11%20-%20Javascript%20Avan%C3%A7ado%20I%2…es%20de%20projetos/aluraframe/client/js/app/views/NegociacoesView.js:21:36)
    at NegociacoesView.update (file:///D:/Natanael/Desktop/Alura/11%20-%20Javascript%20Avan%C3%A7ado%20I%2…es%20de%20projetos/aluraframe/client/js/app/views/NegociacoesView.js:41:41)
    at NegociacaoController.adiciona (file:///D:/Natanael/Desktop/Alura/11%20-%20Javascript%20Avan%C3%A7ado%20I%2…rojetos/aluraframe/client/js/app/controllers/NegociacaoController.js:19:31)
    at HTMLFormElement.onsubmit (file:///D:/Natanael/Desktop/Alura/11%20-%20Javascript%20Avan%C3%A7ado%20I%2…tos%20e%20padr%C3%B5es%20de%20projetos/aluraframe/client/index.html?:14:93)
dataParaTexto @ DateHelper.js:10
model.negociacoes.map.n @ NegociacoesView.js:24
_template @ NegociacoesView.js:21
update @ NegociacoesView.js:41
adiciona @ NegociacaoController.js:19
onsubmit @ index.html:14

Fiz um teste no console para com os métodos dataParaTexto e textoParaData da classe DateHelper e não houve nenhum erro.

Segue como está meu código:

class DateHelper {

    constructor () {

        throw new Error('Esta classe não pode ser instanciada.');
    }

    static dataParaTexto(data) {       

         return `${data.getDate()}/${data.getMonth()+1}/${data.getFullYear()}`;              
    }

    static textoParaData(texto) {

        if (!/^\d{4}-\d{2}-\d{2}$/.test(texto))
            throw new Error('Deve estar no formato aaaa-mm-dd');

        return new Date(...texto.split('-').map((item, indice) => item - indice % 2));  
    }

}
class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);
        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');  
        this._listaNegociacoes = new ListaNegociacoes();

        this._negociacoesView = new NegociacoesView($('#negociacoesView'));
        this._negociacoesView.update(this._listaNegociacoes);
    }  

    adiciona (event) {

        event.preventDefault();              
        this._listaNegociacoes.adiciona(this._criaNegociacao());       
        this._negociacoesView.update(this._listaNegociacoes);        
        this._limpaFormulario();                    
    }

    _criaNegociacao (){

        return new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value);        
    }

   _limpaFormulario (){

            this._inputData.value = '';
            this._inputQuantidade.value = '1';
            this._inputValor.value = '0.0';     

            this._inputData.focus();
   }

}
class NegociacoesView {

    constructor(elemento) {
        this._elemento = elemento;
    }

    _template(model) {      

        return ` 
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>DATA</th>
                    <th>QUANTIDADE</th>
                    <th>VALOR</th>
                    <th>VOLUME</th>
                </tr>
            </thead>

            <tbody>
               ${model.negociacoes.map(n => `

                    <tr>    
                        <td>${DateHelper.dataParaTexto(n.data)}</td>
                        <td>${n.quantidade}</td>
                        <td>${n.valor}</td>
                        <td>${n.Volume}</td>
                    </tr>

                `).join('')}
            </tbody>         

            <tfoot>
            </tfoot>
        </table> 
        `;
    }

    update(model) {

        this._elemento.innerHTML = this._template(model);
    }
}
class ListaNegociacoes {

    constructor() {
        this._negociacoes = [];
    }

   adiciona(negociacao) {

        this._negociacoes.push(negociacao);
   }

    get negociacoes() {

        return [].concat(this._negociacoes);        
    }
}
class Negociacao {

    constructor(data, quantidade, valor) {

        this._data = new Date(data.getTime());
        this._quantidade = quantidade;
        this._valor = valor;        
        Object.freeze(this);
    }

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

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

    get Quantidade() {
        return this._quantidade;
    }

    get Valor() {
        return this._valor;
    }
}

Desde já agradeço a atenção.

3 respostas
solução!

O problema esta na classe Negociacao. Você criou os métodos getters começando com maiúscula.

Dai, no template da sua view quer acessar a data como n.data que é o correto, mas como você definiu como Data teria que ser n.Data.

Sugiro corrigir a classe do modelo, porque getters começam com minúscula e não maiúscula.

Sucesso e bom estudo meu aluno.

Fiz a correção sugerida e funcionou perfeitamente.

Muito obrigado Flávio.

Tranquilo meu aluno! Lembrando-o que ainda há mais dois treinamentos de JavaScript Avançado pela frente para que você se torne um cangaceiro :)

Sucesso e bom estudo Costa!