Aula 5 - Enviando Dados com o Post | jQuery: avance na biblioteca mais popular do mercado parte 2

No vídeo numero 3 (Obtendo Placar) quando realizamos a sincronização no servidor com o placar vazio, ficamos sem dados no servidor. Porém, ao tentar replicar essa ocorrência a função 'sincronizaPlacar()' não está realizando o POST. Segue abaixo o código

principal.html

<!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">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

       <div class="center">
           <img src="img/spinner.gif" alt="Spinner" id="spinner">
           <p id="erro">Ocorreu um erro, por favor tente mais tarde!</p>
       </div>
        <ul class="informacoes center">
            <li>
                <i class="small material-icons icones">description</i>
                <span id="tamanho-frase">19</span> palavras

            </li>
            <li>
                <i class="small material-icons icones">query_builder</i>
                <span id="tempo-digitacao">4</span> segundos
            </li>
        </ul>

        <textarea class="campo-digitacao" rows="8" cols="40" ></textarea>
        <div class="botoes">
            <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
                <i class="material-icons">restore</i>
            </a>
            <a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
                <i class="material-icons">assignment</i>
            </a>
            <a id="botao-frase" class="btn-floating btn-large waves-effect waves-light blue">
                <i class="material-icons">shuffle</i>
            </a>
            <a id="botao-frase-id" class="btn-floating btn-large waves-effect waves-light cyan">
                <i class="material-icons">repeat_one</i>
            </a>
            <input type="number" min="0", id="frase-id">

            <a id="botao-sync" class="btn-floating btn-large waves-effect waves-light yellow">
                <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>
   </div>
   <section class="placar">
    <h3 class="center">Placar</h3>
        <table class="centered bordered">
            <thead>
                <tr>
                    <th>Usuário</th>
                    <th>No. de palavras</th>
                    <th>Remover</th>
                </tr>
            </thead>
        <tbody>
        </tbody>
    </table>
</section>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="js/placar.js"></script>
    <script src="js/frase.js"></script>
</body>
</html>

sincronizaPlacar

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("Enviei ao servidor");
        })
    })

}

Olá Diogo,

Repare que você colocou o código :

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

Dentro da função linhas.each() do jQuery.

O que está acontecendo é que quando o placar esta zerado, a variável linhas será um array vazio, logo a função .each() não faz nada, pois não pode iterar sobre um array vazio.

Se a função .each() não faz nada, o código do $.post() não é executado.

O correto a se fazer é colocar o código que faz o ajax fora do .each() , como abaixo:

function sincronizaPlacar(){
        console.log("clicado");
        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("Enviei ao servidor");
        });
    }

Experimente fazer isso e veja se resolveu.

Chegou a hora de transformar