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:
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>');
}
}
each
do jquery que passa por todos os elementos que foram selecionados.