0

Estava com um problema referente a como passar os dados para o front e mudar a visualização de tais informações, após dar uma pesquisada, juntei algumas coisas que fui pesquisando, ficou bem simples, mas funcionou de inicio (errei nessa parte, não testei com mais conteúdo).

O código, recebe os valores do back e apenas exibe true ou null (exibe nada rs):

{{#each qrs}}
<h2 class="d-inline" id="horarioDaAula1">{{horario1}}</h2>
    <h2 class="d-inline" id="horarioDaAula2">{{horario2}}</h2>
    <h2 class="d-inline" id="horarioDaAula3">{{horario3}}</h2>
    <h2 class="d-inline" id="horarioDaAula4">{{horario4}}</h2>
    <h2 class="d-inline" id="horarioDaAula5">{{horario5}}</h2>
    <br>
{{/each}}

O script que utilizei para fazer a alteração da visualização, para ficar mais bonito de certa forma.

<script>
      // Pegar o valor e exibir ícones. Para colocar na visualização da presença do aluno
    for(i = 1; i<=5; i++){

      var n = "#horarioDaAula";
      var horario = n + i;

      var myElement = $(horario);
      var myText = myElement.text();  
      if(myText == "true"){
        myElement.html('<i class="fas fa-check-circle fa-xs" style="color: green"></i>');
      }else{
        myElement.html('<i class="fas fa-times-circle fa-xs" style="color: red"></i>');
      }
    }

  </script>

Até ai estava tudo tranquilo, mas quando o {{#each qrs}} foi implementado, mais valores aparecem de acordo com cada collection. Com isso ficou como a imagem a seguir:

inserir a descrição da imagem aqui

Não tenho muito conhecimento, sou novato, pelo que percebi (creio eu) o jquery pega somente um ID e não todos os h2 que possuem o mesmo ID.

Como eu poderia estar arrumando essa questão, ou fazendo de outra forma?

EDIT 1: Como aparece no front com a utilização do {{#each qrs}}

    <h2 class="aa d-inline" id="horarioDaAula1">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula2">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula3">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula4">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula5">true</h2>
<br>
    <h2 class="aa d-inline" id="horarioDaAula1">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula2">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula3">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula4">true</h2>
    <h2 class="aa d-inline" id="horarioDaAula5">true</h2>
<br>

Ou seja, quanto mais documentos (mongodb) eu tiver, mais aparece o h2.

Tentei pegar os valores do h2 pela class (aa) mas não consegui pegar esses valores

A forma que tentei pegar pela class:

for(i = 1; i<=5; i++){

      var n = ".aa";
      var myElement = $(n);
      var myText = myElement.text();  
      console.log(myText)

      if(myText == "true"){
        myElement.html('<i class="fas fa-check-circle fa-xs" style="color: green"></i>');
      }else{
        myElement.html('<i class="fas fa-times-circle fa-xs" style="color: red"></i>');
      }
    }
11
  • Não entendi, qual é o problema?
    – JassRiver
    Commented 15/08/2020 às 14:28
  • O problema é que observe na imagem, os valores que eram todos true na primeira linha, foram mudados para icones, mas na segunda não acontece o mesmo. Commented 15/08/2020 às 14:30
  • 2
    jsfiddle.net/dfsb387r/1
    – Ryan Lemos
    Commented 15/08/2020 às 14:54
  • 1
    Olha ai, o que acontece que quando você usa o seletor de classe, você seleciona mais de um elemento de uma vez. Usei uma função chamada each do jquery que passa por todos os elementos que foram selecionados.
    – Ryan Lemos
    Commented 15/08/2020 às 14:55
  • 1
    api.jquery.com/each
    – Ryan Lemos
    Commented 15/08/2020 às 14:57

1 Resposta 1

1

Solução incorreta:

Se eu entendi, você está fazendo um "foreach" em "qrs" e pra cada qr você está usando o código que colou no script.

Então, tente a seguinte solução (Eu não testei, estou fazendo de cabeça)
Laço qrs:

{{#each qrs}}
    <h2 class="aa d-inline" data-id="1">{{horario1}}</h2>
    <h2 class="aa d-inline" data-id="2">{{horario2}}</h2>
    <h2 class="aa d-inline" data-id="3">{{horario3}}</h2>
    <h2 class="aa d-inline" data-id="4">{{horario4}}</h2>
    <h2 class="aa d-inline" data-id="5">{{horario5}}</h2>
    <br>
{{/each}}

Script:

<script>
      // Pegar o valor e exibir ícones. Para colocar na visualização da presença do aluno
    for(i = 1; i<=5; i++){

      var myElement = $(`.aa[data-id="${i}"]`);
      var myText = myElement.text();  
      if(myText == "true"){
        myElement.html('<i class="fas fa-check-circle fa-xs" style="color: green"></i>');
      }else{
        myElement.html('<i class="fas fa-times-circle fa-xs" style="color: red"></i>');
      }
    }

  </script>

O problema:

Mesmo com essa solução, acontece que sempre os data-ids vão ser reiniciados na sua aplicação, ou seja, depois do 5, sempre volta a ser 1, 2, 3, 4, 5 e o javascript vai entender que é pra pegar todos os data-ids 1, 2... novamente.

Além disso, o seu laço só está englobando os 5 primeiros elementos, se houverem mais, ele não vai fazer a troca


Solução correta:

  1. Coloque todos os elementos do horario em uma variável:
var Horarios = $('.aa');
  1. Faça um laço de repetição com todos os horários da tela
Horarios.each(function(index, item) {

});
  1. Verifique se o conteúdo de cada item do laço de repetição (de cada horário) é true ou false, se true, imprime o ícone de presente, se false, o ícone de falta.
  let myText = $(this).html();
    if(myText == "true"){
      $(this).html('ICONE PRESENTE');
    } else {
      $(this).html('ICONE FALTOU');
    }
  1. Código completo:
<script>
    // Coloca todos os horarios em uma variavel
    var Horarios = $('.aa');

    // Percorre o array criado na varivel anterior
    Horarios.each(function(index, item) {
      // Verifica se o html dentro do horario tem true ou false
      let myText = $(this).html();
        if(myText == "true"){
          $(this).html('ICONE PRESENTE');
        } else {
          $(this).html('ICONE FALTOU');
        }
    });
</script>

Demonstração:

var Horarios = $('.aa');

Horarios.each(function(index, item) {
  let myText = $(this).html();
    if(myText == "true"){
      $(this).html('<span style="color: green">&#10004;</span>');
    } else {
      $(this).html('<span style="color: red">&times;</span>');
    }
});
/* deixa os h1 em uma unica linha */
h1 {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="aa">true</h1>
<h1 class="aa">false</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>
<h1 class="aa">false</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>
<h1 class="aa">true</h1>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .