Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Vírgulas estranhas aparecendo após requisição ajax

Referente ao curso JavaScript: aprofundando em MVC, padrão Proxy e Factory, no capítulo Combatendo Callback Hell com Promises e atividade Desafio: obter todas as negociações

por Thiago Santos
| 165.5k xp | 30 posts

Toda vez que é realizada uma requisição aparecem umas virgulas na tela. http://imgur.com/EvTHPOs

O html fica assim:

<div id="tabelaNegociacoes">

          ,

          ,

          ,

          ,

          ,

          ,

          ,

          ,
            <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th>DATA</th>
            <th>QUANTIDADE</th>
            <th>VALOR</th>
            <th>VOLUME</th>
          </tr>
        </thead>

        <tbody>

            <tr>
              <td>6/6/2016</td>
              <td>1</td>
              <td>150</td>
              <td>150</td>
            </tr><tr>
              <td>6/6/2016</td>
              <td>2</td>
              <td>250</td>
              <td>500</td>
            </tr><tr>
              <td>6/6/2016</td>
              <td>3</td>
              <td>350</td>
              <td>1050</td>
            </tr><tr>
              <td>30/5/2016</td>
              <td>1</td>
              <td>450</td>
              <td>450</td>
            </tr><tr>
              <td>30/5/2016</td>
              <td>2</td>
              <td>550</td>
              <td>1100</td>
            </tr><tr>
              <td>30/5/2016</td>
              <td>3</td>
              <td>650</td>
              <td>1950</td>
            </tr><tr>
              <td>23/5/2016</td>
              <td>1</td>
              <td>750</td>
              <td>750</td>
            </tr><tr>
              <td>23/5/2016</td>
              <td>2</td>
              <td>950</td>
              <td>1900</td>
            </tr><tr>
              <td>23/5/2016</td>
              <td>3</td>
              <td>950</td>
              <td>2850</td>
            </tr>

        </tbody>

        <tfoot>
          <tr>
            <td colspan="3"></td>
            <td>10700</td>
          </tr>
        </tfoot>
      </table>
    </div>

Muito estranho!!! Preciso de ajuda.

7 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Onde está o código do seu template? Também de índex.Html

por Thiago Santos
| 165.5k xp | 30 posts

Foi mal, esqueci de passar o código.

NegociacoesView.js

class NegociacoesView extends View{
  template(listaNegociacao) {
    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>
          ${listaNegociacao.negociacoes.map(n => `
            <tr>
              <td>${DateHelper.dataParaTexto(n.data)}</td>
              <td>${n.quantidade}</td>
              <td>${n.valor}</td>
              <td>${n.volume}</td>
            </tr>
          `)}
        </tbody>

        <tfoot>
          <tr>
            <td colspan="3"></td>
            <td>${listaNegociacao.volumeTotal}</td>
          </tr>
        </tfoot>
      </table>
    `;
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Negociações</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-theme.css">

</head>
<body class="container">

  <h1 class="text-center">Negociações</h1>

  <div id="mensagemView"></div>

  <form class="form" onsubmit="negociacaoController.adiciona(event)">

    <div class="form-group">
      <label for="data">Data</label>
      <input type="date" id="data" class="form-control" required autofocus/>
    </div>

    <div class="form-group">
      <label for="quantidade">Quantidade</label>
      <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
    </div>

    <div class="form-group">
      <label for="valor">Valor</label>
      <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
    </div>

    <button class="btn btn-primary" type="submit">Incluir</button>
  </form>

  <div class="text-center">
    <button onclick="negociacaoController.importaNegociacoes()" class="btn btn-primary text-center" type="button">
      Importar Negociações
    </button>
    <button onclick="negociacaoController.remove()" class="btn btn-primary text-center" type="button">
      Apagar
    </button>
  </div>
  <br>
  <br>

  <div id="tabelaNegociacoes"></div>

  <script src="js/app/models/Negociacao.js"></script>
  <script src="js/app/models/ListaNegociacoes.js"></script>
  <script src="js/app/models/Mensagem.js"></script>
  <script src="js/app/views/View.js"></script>
  <script src="js/app/views/NegociacoesView.js"></script>
  <script src="js/app/views/MensagemView.js"></script>
  <script src="js/app/services/ProxyFactory.js"></script>
  <script src="js/app/services/NegociacoesService.js"></script>
  <script src="js/app/services/HttpService.js"></script>
  <script src="js/app/helpers/DateHelper.js"></script>
  <script src="js/app/helpers/Bind.js"></script>
  <script src="js/app/controllers/NegociacaoController.js"></script>
  <script>
    let negociacaoController = new NegociacaoController();

  </script>
</body>
</html>
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Hammmm....

solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Aham, descobri uma coisa. Olhe seu template:

        <tbody>
          ${listaNegociacao.negociacoes.map(n => `
            <tr>
              <td>${DateHelper.dataParaTexto(n.data)}</td>
              <td>${n.quantidade}</td>
              <td>${n.valor}</td>
              <td>${n.volume}</td>
            </tr>
          `)}
        </tbody>

Vou explicar o que esse código faz e dizer o que ficou faltando, tudo bem?

Usamos a função map para converter a lista de objetos Negociacao em uma lista de String. Mas por que String? Porque queremos para cada objeto Negociacao transformá-lo em uma tr onde cada dado de uma negociação é exibido em uma td. Até aí tudo bem, certo? É por isso que map é poderoso, nos permite criar um novo array aplicando nosso critério de transformação.

Então, em que lugar está o problema? Você está devolvendo para ${} um array de objetos String. Ë por isso que você precisa juntar cada item do array em uma string gigante contendo todos os trs concatenados. Sendo assim, onde está .join('')? Ficou faltando essa instrução, no final seu template deveria estar asssim:

        <tbody>
          ${listaNegociacao.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>

Belezinha?

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Então, as vírgulas que você estava vendo era as vírgulas que separavam cada item do array que você não concatenou com join. Aliás, nem achava que sairia algo na tela, mas sai essa bizarrice que é a vírgula.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Fechou Thiago?

:)

por Thiago Santos
| 165.5k xp | 30 posts

Eu lembro de ter isso na explicação, mas valeu pelo esclarecimento. Já estava ficando assustada com as virgulas vindo do além.