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!

15
respostas

Problema ao Tentar Salvar o Placar com Post

Olá,

Estou com problemas para fazer funcionar o código baseado na aula do capítulo 5 do curso de jQuery Parte 2.

Ao executar o comando post, nada acontece no terminal do navegador, o arquivo placar é limpo e fica vazio, e no terminal do linux é retornada a seguinte mensagem: "[TypeError: Cannot read property '_id' of undefined]".

O que é possível fazer para resolver este problema?

15 respostas

Você tem que conferir duas coisas:

  • Sua variável que guarda o elemento da busca está declarado/inicializado no escopo da função ou fora dela?

  • Você conferiu se a variável está retornando/recebendo o valor que você espera? ( use o console.log para fazer isso )

  • O elemento em questão existe na hora da declaração?

Se tudo isso estiver conferido, manda o seu codigo aqui pra gente tentar te ajudar :)

  • A variável que guarda os dados está declarada dentro da função onde é executado o post.

  • Eu conferi todos os resultados das variáveis através do console, e está tudo correto, todos os valores esperados foram exibidos. O problema ocorre apenas ao tentar salvar os dados com a função post. O objeto dados que é passado como parâmetro no método post retorna com os valores corretos no console, então acredito que não seja problema na variável em sí, e nem em seus dados.

--

Segue meu código:

$("#botao-frase").click(geraFraseAleatoria);
$("#botao-id").click(buscaFrase);
$("#botao-sync").click(sincronizaEstatisticas);

//Utilizando função em Ajax para fazer requisição e trazer dados de maneira assíncrona
function geraFraseAleatoria(){

    $("#spinner").toggle();

    $.get("http://localhost:3000/frases", trocaFraseAleatoria)
    .fail(function(){
        $("#erro").toggle();
        setTimeout(function(){
            $("#erro").toggle();
        }, 1500);
    })
    .always(function(){
        $("#spinner").toggle();
    });
}

//Troca a frase aleatóriamente de acordo com as frases armazenados no array no arquivo frases.js
function trocaFraseAleatoria(data){
    var frase = $(".frase");
    var numero_aleatorio = Math.floor(Math.random() * data.length);
    frase.text(data[numero_aleatorio].texto);
    atualizaTempoInicial(data[numero_aleatorio].tempo);
    atualizaTamanhoFrase();
}

function buscaFrase(){
    $("#spinner").toggle();
    var fraseId = $("#frase-id").val();
    var data = {id: fraseId};
    $.get("http://localhost:3000/frases", data, trocaFrase)
    .fail(function(){
        $("#erro").toggle();
        setTimeout(function(){
            $("#erro").toggle();
        }, 2000)
    })
    .always(function(){
        $("#spinner").toggle();
    });
}

function trocaFrase(data){
    var frase = $(".frase");
    frase.text(data.texto);
    atualizaTamanhoFrase();
    atualizaTempoInicial();
}

function sincronizaEstatisticas(){
    var estatisticas = [];
    var linhas = $("tbody>tr")
    linhas.each(function(){
        var usuario = $(this).find("td:nth-child(1)").text();
        var palavras = $(this).find("td:nth-child(2)").text();

        var obj_estatisticas = {
            usuario: usuario,
            palavras: palavras
        }

        estatisticas.push(obj_estatisticas);

    });

    var dados = {
        estatisticas: estatisticas
    };

    console.log(dados);

    $.post("http://localhost:3000/placar", dados, function(){
        console.log("Salvou!");
    });

}

Ao tentar executar o comando abaixo

$.post("http://localhost:3000/placar", dados, function(){ console.log("Salvou!"); });

é exibida a seguinte mensagem no terminal do sistema

[TypeError: Cannot read property '_id' of undefined]

e a mensagem "Salvou!" que deveria aparecer no console do navegador não aparece.

Ok. Eu olhei o curso aqui e voce está usando o NodeJS para receber estes dados. Esse parece ser um erro de parseamento das variáveis recebidas no servidor.

Abre o prompt do NodeJS ( se estiver no windows ) ou o terminal ( Ubuntu e macOs), caminha até a pasta que tem o package.json e faça o comando

npm install

Verifica se ele está dando algum erro.

Este erro que você está tendo geralmente é exibido por causa do BodyParser que pode não estar instalado no server-side

Quando isso acontece, o servidor devolve o erro pro Browser.

Verifica essa informação e manda de volta pra gente ver se resolve :)

  • Eu executei o comando npm install dentro da pasta do servidor onde o arquivo package.json está localizado, e é retornado a seguinte mensagem no terminal: "npm WARN AluraTyper@1.0.0 No repository field."

  • Após isso eu tentei novamente executar o método post, mas nada mudou. Continua com o mesmo erro no terminal ao tentar executar.

Pode ser a falta de suporte para o plugin. Eu baixei os arquivos e não funcionaram também

Volta lá no prompt do nodeJS e faz um npm update

Ele deve te retornar isso aqui, jutnoc om outras coisas:

+-- body-parser@1.18.2
+-- consign@0.1.6
+-- express@4.16.2

Depois levanta o servidor de novo e fala pra gente o que rolou

Executei o comando npm update no terminal e retornou várias linhas, mas das que você citou, apenas as linhas:

consign@0.1.6 
express@4.16.2

A linha body-parser@1.18.2 não retornou.

Ainda assim, tentei executar novamente o método post, mas nada mudou. Continua com o mesmo erro.

Você tem como upar seu código e me passar o link pra eu analisar aqui?

Manda ele no google drive ou algum outro lugar pra eu dar uma olhada

Eu tenho o projeto salvo nesse repositório:

https://github.com/tzanarde/jQuery-Typer

Eu fiz o download do projeto final do curso, disponibilizado pelo instrutor e funciona normalmente o método post.

Inclusive eu executei o comando npm update e retornou as três linhas que você havia citado, inclusive o body-parser@1.18.2.

Acredito que eu deva ter deixado passar alguma coisa durante o curso.

Realmente é o body-parser

Navega até a pasta do servidor pelo cmd do NodeJS e executa o seguinte comando

npm install --save body-parser

Não deixa de avisar se deu certo!

Não deu certo.

Eu executei o comando na pasta, mas continua retornando o mesmo erro.

Pesquisei a respeito e disseram que o problema de não conseguir instalar o body-parser poderia ser em relação ao repositório, então segui esse tutorial, visto que tem muitos likes, mas nada feito. Continuo com o mesmo problema.

Você conseguiu executar com os fontes que te passei?

Sim. Eu usei seu código pra fazer a execução do game. Antes de atualizar o body parser, ele tava dando o erro "[TypeError: Cannot read property '_id' of undefined]"

Depois que eu atualizei, ele parou. Eu vou fazer o seguinte. Vou subir a pasta servidor aqui e você coloca ela no seu projeto e ve. A únca coisa que eu fiz foi instalar o bodyparser. Eu lembro que o body parser tinha parado de funcionar um tempo quando eu tava mexendo com um projeto Meteor de uma empresa. A atualização era obrigatória.

https://drive.google.com/file/d/1rOef46KaUYGMf_LZMbo7l8qyOYE_3ZYa/view?usp=sharing

Ai tem a pasta servidor inteira com o body-parser atualizado

Legal pessoal!!

Substitui a pasta servidor e mesmo assim não funcionou. Tentei executar os comandos de instalação e atualização do npm, mas continua da mesma maneira.

Estava dando uma pesquisada e vi que pode dar problemas relacionados ao proxy, e na rede que estou trabalhando nos conectamos através de um proxy. Tentei realizar a configuração do mesmo seguindo alguns tutoriais como este e este, mas mesmo assim não funcionou.

Vou fazer o seguinte: Vou testar em uma rede sem proxy quando chegar em casa para ver se realmente pode ser isso, pois talvez eu não tenha configurado o proxy devidamente. Após isso eu retorno com as informações.

Por enquanto agradeço muito sua ajuda Allan.

Pode ser um proxy que está bloquando o link externo mesmo. Faça os testes em casa e retorna pra gente saber o que rolou!

Mas lembra de tirar os códigos de proxy de lá pra não dar conflito na sua máquina sem proxy

Precisando de ajudar, estamos aqui!!!