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

Uncaught TypeError: Cannot read property 'map' of undefined

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

}
10 respostas

Boa noite, Renato! Como vai?

Como o próprio erro diz

Uncaught TypeError: Cannot read property 'map' of undefined

Vc não está conseguindo executar o método map() de undefined, ou seja, model.negociacoes está com o valor undefined nessa linha:

${model.negociacoes.map(n => // restante do código omitido ...

Poste aqui o código onde vc está chamando o método update() da classe NegociacoesView. Vc deve estar passando o model sem a lista de negociações.

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

}

adiciona(event) {

event.preventDefault();

this._listaNegociacoes.adiciona(this._criarNegociacao());

this._negociacoesView.update(this._listaNegociacoes);

this._limparFormulario();

}

}

//Os metodos _criarNegociacao() e _limparFormulario() foram implementados

Renato, no construtor da sua classe NegociacaoController está faltando essa última linha aqui:

this._negociacoesView.update(this._listaNegociacoes);

No entanto, essa não é o problema certamente! Cole aqui, por favor, o código completo da classe ListaNegociacoes para que eu possa dar uma olhada.

DICA: Sempre que for compartilhar código aqui no fórum, utilize o botão "inserir código" para que ele possa sair com a formatação correta.

class ListaNegociacoes{

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

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

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

}

Que estranho... Estou com os arquivos que vc passou iguais aos seus e não obtive esse problema.

Faz o seguinte, vc consegue colocar o seu projeto no github ou no google drive e mandar o link aqui para que eu possa baixar ele? Assim eu darei uma olhada mais de perto e poderei ajudar melhor!

Outra coisa, em que momento vc cai nesse erro? Que ação vc tenta fazer?

O link do github: https://github.com/Renanas/AluraFrame

E sobre a outra pergunta. Assim que eu terminei o map ele já deu o erro, e não sai tentando mudar linha sem saber o que era, então só voltei o vídeo e procurei por algum ponto, palavra ou parâmetro errado que poderia ter passado, mas não encontrei nada. Fui procurar nos debates e acredito que só eu tive esse problema com o map().

Obrigado pela atenção desde já.

Pois é, como eu te falei eu peguei os códigos que vc passou e funcionou corretamente. Eu vou pegar o seu projeto completo no github e verei o que posso fazer pra te ajudar!

A qualquer momento eu volto pra te tirar das trevas e levar vc pra luz! Me aguarde!

solução!

Boa noite, Renato! Como vai?

Baixei aqui o seu código e vi que acabou me passando despercebido o detalhe que está causando o problema! No último código que vc postou, veja que na sua classe ListaNegociacoes vc declara um getter negociacao que retorna a concatenação de arrays. No entanto, na classe NegociacoesView quando vc faz o map(), vc tenta acessar um getter chamado negociacoes, no plural! Mas ele não existe e, por isso, dá o problema no map()!

Eis o problema, meu aluno! Como prometido, acabei com essas densas trevas!

Qualquer coisa é só falar!

Grande abraço e bons estudos!

Nossa, muito obrigado, e olha que eu já tinha procurado em todas as classes. Obrigado mesmo!

Por nada, Renato! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!