Entrar Ainda não tem acesso?
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)
10
respostas

Uncaught TypeError: Cannot read property 'map' of undefined

Referente ao curso JavaScript: conhecendo o Browser e padrões de projeto, no capítulo Temos o modelo, mas e a view? e atividade Construindo um template dinâmico com a função map

por Renato de Andrade Silva
| 134.3k xp | 5 posts
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
por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

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.

por Renato de Andrade Silva
| 134.3k xp | 5 posts

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

por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

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.

por Renato de Andrade Silva
| 134.3k xp | 5 posts
class ListaNegociacoes{

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

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

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

}
por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

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?

por Renato de Andrade Silva
| 134.3k xp | 5 posts

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á.

por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

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!
por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

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!

por Renato de Andrade Silva
| 134.3k xp | 5 posts

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

por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

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

Grande abraço e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA