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

Não consigo identificar o problema

Boa tarde, não consigo identificar o seguinte problema. No console aparece a seguinte mensagem: NegociacoesView.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'map') at NegociacoesView._template (NegociacoesView.js:19:37) at NegociacoesView.update (NegociacoesView.js:31:41) at new NegociacaoController (NegociacaoController.js:13:31) at index.html:53:36 _template @ NegociacoesView.js:19 update @ NegociacoesView.js:31 NegociacaoController @ NegociacaoController.js:13 (anonymous) @ index.html:53

Abaixo seguem as classes

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) => {
                    console.log(n);
                    return n;
                })}
            </tbody>

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

    update(model){
        this._elemento.innerHTML = this._template(model)
    }
}
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 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;
    }
}
class ListaNegociacoes{
    constructor(){
        this._negociacoes = []
    }

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

Boa noite, a única diferença que vejo em relação ao meu projeto está na lista de negociações.

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

Onde tem esta linha final que executa a concatenação das negociações.

solução!

Nas linhas 18 a 23 de NegociacoesView.js, seu código está assim:

<tbody>
    ${model.negociacoes.map((n) => {
        console.log(n);
        return n;
    })}
</tbody>

Está tentando acessar a propriedade "negociacoes" da classe "ListaNegociacoes". Porém, vc não fez um getter pra conseguir acessar. Dessa forma, ou vc muda pra isso:

<tbody>
    ${model._negociacoes.map((n) => {
        console.log(n);
        return n;
    })}
</tbody>

Ou vc cria um getter na classe "ListaNegociacoes", que inclusive é o que eu acho ideal. Ficaria assim:

get negociacoes(){
    return this._negociacoes;
}