Solucionado
na hora de salvar o placar com o post eu consigo salvar mais tem algo de errado com o meu codigo alem dos meus placares ele esta salvando um objeto em branco exemplo: fiz uma jogada de 2 pontos era para aparecer apenas
[{"usuario":"Guilherme","pontos":"2","_id":"VpIhPwhK6U6ZGobe"}mas esta aparecendo assim
[{"usuario":"Guilherme","pontos":"2","_id":"VpIhPwhK6U6ZGobe"},{"usuario":"","pontos":"","_id":"zgZ0Co5gCVVmQaeV"}]Aqui esta o codigo
function sincronizaPlacar(){
var placar = [];
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 score = {
usuario: usuario,
pontos: palavras
};
placar.push(score);
});
var dados = {
placar: placar
};
$.post("http://localhost:3000/placar", dados, function(){
console.log("SALVOU");
})
}alguem me ajuda pfv
Oi Fabio, tudo bem? Cola o HTML pra mim ver uma coisa por favor?
claro Wanderson Obrigado pela atencão
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Typer</title>
<link rel="stylesheet" href="css/libs/materialize.min.css">
<link rel="stylesheet" href="css/libs/google-fonts.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="container">
<h1 class="center">Alura Typer</h1>
<p class="frase center">Esta frase tem oito lindas e belas palavras
<div class="center">
<img src="img/spinner.gif" alt="Spinner" id="spinner">
<p id="erro">Ocorreu um erro, por favor tente novamente</p>
</div>
<ul class="informacoes center">
<li>
<i class="small material-icons icones">description</i>
<span id="tamanho-frase">30</span> palavras
</li>
<li>
<i class="small material-icons icones">query_builder</i>
<span id="tempo-digitacao">1</span> segundos
</li>
</ul>
<textarea class="campo-digitacao" rows="8" cols="40"></textarea>
<div class="botoes">
<a class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar"><i class="material-icons">restore</i>
</a>
<a class="btn-floating btn-large waves-effect waves-light green" id="botao-placar"><i class="material-icons">assignment</i>
</a>
<a class="btn-floating btn-large waves-effect waves-light blue" id="botao-frase"><i class="material-icons">shuffle</i>
</a>
<a class="btn-floating btn-large waves-effect waves-light cyan" id="botao-frase-id"><i class="material-icons">repeat_one</i>
</a>
<input type="number" id="frase-id" min="0">
<a class="btn-floating btn-large waves-effect waves-light yellow" id="botao-sync"><i class="material-icons">swap_vert</i>
</a>
</div>
<ul class="center">
<li><span id="contador-caracteres">0</span> caracteres</li>
<li><span id="contador-palavras">0</span> palavras</li>
</ul>
<section class="placar">
<h3 class="center">Placar</h3>
<table class="centered bordered">
<thead>
<tr>
<th>Nome</th>
<th>No. de palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</section>
</div>
<script src="js/jquery.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/main.js"></script>
<script src="js/placar.js"></script>
<script src="js/frase.js"></script>
</body>
</html>E o restante do código javascript também? Quero ver como ele insere os jogadores na tabela por exemplo...
$("#botao-placar").click(mostraPlacar);
$("#botao-sync").click(sincronizaPlacar);
function inserePlacar(){
var corpotabela = $(".placar").find("tbody");
var usuario ="Guilherme";
var numPalavras = $("#contador-palavras").text();
var linha = novaLinha(usuario, numPalavras);
linha.find(".botao-remover").click(removeLinha);
corpotabela.prepend(linha);
$(".placar").slideDown(800);
scrollPlacar();
}
function scrollPlacar(){
var posicaoPlacar = $(".placar").offset().top;
$("body").animate(
{
scrollTop: posicaoPlacar+"px"
},1200);
}
function novaLinha(usuario,numPalavras){
var linha = $("<tr>");
var colunaUsuario = $("<td>").text(usuario);
var colunaPalavras = $("<td>").text(numPalavras);
var colunaRemover = $("<td>");
var link = $("<a>").addClass("botao-remover").attr("href","#");
var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");
link.append(icone);
colunaRemover.append(link);
linha.append(colunaUsuario);
linha.append(colunaPalavras);
linha.append(colunaRemover);
return linha;
}
function removeLinha(){
event.preventDefault();
var linha = $(this).parent().parent();
linha.fadeOut(600);
setTimeout(function(){
linha.remove();
},600);
}
function mostraPlacar (){
$(".placar").stop().slideToggle(800);
}
function sincronizaPlacar(){
var placar = [];
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 score = {
usuario: usuario,
pontos: palavras
};
placar.push(score);
});
var dados = {
placar: placar
};
$.post("http://localhost:3000/placar", dados, function(){
console.log("SALVOU");
})
}Fabio, testa pra mim se, recomendo o tr dentro do do tbody o jogo continua funcionando e se o problema é resolvido, por favor?
<section class="placar">
<h3 class="center">Placar</h3>
<table class="centered bordered">
<thead>
<tr>
<th>Nome</th>
<th>No. de palavras</th>
<th>Remover</th>
</tr>
</thead>
<tbody>
<tr> <-------
</tr>
</tbody>voce fala esse tr aqui? removi, o jogo funciona mas o erro persiste :(
Estranho, não consigo encontrar o problema assim no olho, me disponibiliza seu projeto no github ou em algum lugar por favor?
voce pode me passar seu email? Envio todo o projeto para voce dar uma olhada
wanderson.sabino@alura.com.br
Fabio, desculpa a demora, mas testei aqui e tenho uma hipótese, acontece que talvez esse usuário em branco já esteja em seu banco.
Outra coisa que achei estranho é que o post está dentro de um loop e nesse loop você tem um push no array de platar e está sempre enviando esse objeto novamente, a dica é que você faça o loop e depois dele faça um post só com todos os dados.
O que estava assim:
function sincronizaPlacar(){
var placar = [];
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 score = {
usuario: usuario,
pontos: palavras
};
placar.push(score);
var dados = {
placar: placar
};
console.log(dados);
$.post("http://localhost:3000/placar", dados, function(){
console.log("SALVOU");
});
});
}fica assim:
function sincronizaPlacar(){
var placar = [];
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 score = {
usuario: usuario,
pontos: palavras
};
placar.push(score);
});
var dados = {
placar: placar
};
$.post("http://localhost:3000/placar", dados, function(){
console.log("SALVOU");
});
}O problema que pode ter acontecido é que, quando você tinha uma tr em branco no HTML, na hora de fazer o sinc, ele foi pego e enviado para o servidor.
Minha recomendação é: apaga o data.db na pasta servidor, reinicia o jogo com essa alteração e tenta novamente.