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

Problema com a data - aula 5 parte 2

Boa noite, recebo o seguinte erro do console:

NegociacoesView.js:23 Uncaught TypeError: Cannot read property 'data' of undefined
    at model.negociacoes.map.n (file:///C:/Users/Lucas/Desktop/aluraframe/client/js/app/view/NegociacoesView.js:23:61)
    at Array.map (native)
    at NegociacoesView._template (file:///C:/Users/Lucas/Desktop/aluraframe/client/js/app/view/NegociacoesView.js:20:37)
    at NegociacoesView.update (file:///C:/Users/Lucas/Desktop/aluraframe/client/js/app/view/NegociacoesView.js:39:41)
    at NegociacaoController.adiciona (file:///C:/Users/Lucas/Desktop/aluraframe/client/js/app/controllers/NegociacaoController.js:21:31)
    at HTMLFormElement.onsubmit (file:///C:/Users/Lucas/Desktop/aluraframe/client/index.html:14:93)

ele se refere a este trecho do NegociacoesView.js:

<td>${DateHelper.dataParaTexto(n.data)}</td>

Meu NegociacoesView.js:

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 => {
                    return `
                        <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);
    }

}

Negociacao.js

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;
    }
}

NegociacaoController.js:

class NegociacaoController{

    constructor(){

        let $ = document.querySelector.bind(document);

        this._inputData = $('#data');
        this._inputQauntidade = $('#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();

        console.log(this._listaNegociacoes);
    }

    _criaNegociacao(){
        new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQauntidade.value,
            this._inputValor.value
        );
    }

    _limpaFormulario(){
        this._inputData.value = '';
        this._inputQauntidade.value = 1;
        this._inputValor.value = 0;
        this._inputData.focus();

    }

}

ListaNegociacoes.js:

class ListaNegociacoes {

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

    adiciona(negociacao) {
        this._negociacoes.push(negociacao);
    }

    get negociacoes() {
        return [].concat(this._negociacoes);
    }

}

e o DateHelper.js:

class DateHelper{

    constructor(){
        throw new Error('DateHelper não pode ser instanciada, tem métodos estáticos.')
    }

    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));
    }

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

}

To confuso alguém me salva?

2 respostas
solução!

Bom dia meu aluno!

Faltou o return em _criaNegociacao().

Sucesso e bom estudo!

Muito obrigado !!