I have a query that has several lines with the same id. Here is an example of what it returns:

Now I'm looping in js to return the data like this:

var data = [
   {Id: "552", valor:  "50.00", Descricao: "Fraldas", },
   {Id: "552", valor: "35.00", Descricao: "Creme", },
   {Id: "545", valor: "23.00", Descricao: "Caneta", },
   {Id: "545",  valor: "15.00", Descricao: "Caderno",  },
];

$(document).on('click', '.dad-pagamento', function(){
var linha = ``;
  
  linha  = `<div>
              Assunto: Aviso de pagamento
              
              <table >
              
              <thead>
                <tr>
                  <th >Nº Recibo</th>
                  <th >Data de Vencimento</th>
                  <th >Valor</th>
                </tr>
               </thead>                              
               <tbody>`;               
               Object.keys(data).forEach(i=>{ 
               
               Id = data[i].Id;
               valor = data[i].valor;
               Descricao = data[i].Descricao;
       linha  = `<tr>
                   <td > ${Id}</td>
                   <td > ${valor}</td>
                   <td > ${Descricao}</td>
                 </tr>`;
               })
    linha  = ` </tbody>
             </table>
             
             De V. Exas.
             Atenciosamente 
           </div>`;
          $('#minhaDiv3').show();
          $(".pagmfalta").html(linha);     
});

$(function() {
  $(".btn-show").click(function(e) {
    e.preventDefault();
    el = $(this).data('element');
    $(el).show();
    $("section > div").not(el).hide();
  });
});

$(function() {
  $(".btn-hide").click(function(e) {
    e.preventDefault();
    el = $(this).data('element');
    $(el).hide();
  });
});

function mostra(div){    
  $(".esconder > div").hide();
$('.'   div).show();    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" tabindex="0"  href="s3" data-element="#minhaDiv3">Teste</button>

<section id="s3">
   <div style="display:none" id="minhaDiv3">
      <div >

      </div>
   </div>
</section>

But I intended that whenever the Id was different, it would separate in this way:

Assunto: Aviso de pagamento
Nº Recibo   Data de Vencimento  Valor
552 50.00   Fraldas
552 35.00   Creme
De V. Exas. Atenciosamente

Assunto: Aviso de pagamento
Nº Recibo   Data de Vencimento  Valor
545 23.00   Caneta
545 15.00   Caderno
De V. Exas. Atenciosamente

If you notice the code above it returns all the information even though the Id is different at once.

CodePudding user response：

You need to group first and then forEach the result like:

var data = [{
    Id: "552",
    valor: "50.00",
    Descricao: "Fraldas",
  },
  {
    Id: "552",
    valor: "35.00",
    Descricao: "Creme",
  },
  {
    Id: "545",
    valor: "23.00",
    Descricao: "Caneta",
  },
  {
    Id: "545",
    valor: "15.00",
    Descricao: "Caderno",
  },
];
var results = data.reduce(function(results, org) {
  (results[org.Id] = results[org.Id] || []).push(org);
  return results;
}, {});
$(document).on('click', '.dad-pagamento', function() {
  var linha = ``;
  Object.keys(results).forEach(i => {
    linha  = `<div>
              Assunto: Aviso de pagamento
              
              <table  border="1">
              
              <thead>
                <tr>
                  <th >Nº Recibo</th>
                  <th >Data de Vencimento</th>
                  <th >Valor</th>
                </tr>
               </thead>                              
               <tbody>`;
    Object.keys(results[i]).forEach(b => {

      Id = results[i][b].Id;
      valor = results[i][b].valor;
      Descricao = results[i][b].Descricao;
      linha  = `<tr>
                   <td > ${Id}</td>
                   <td > ${valor}</td>
                   <td > ${Descricao}</td>
                 </tr>`;
    })
    linha  = ` </tbody>
             </table>
             
             De V. Exas.
             Atenciosamente 
           </div>`;
  });
  $('#minhaDiv3').show();
  $(".pagmfalta").html(linha);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" tabindex="0"  href="s3" data-element="#minhaDiv3">Teste</button>

<section id="s3">
  <div style="display:none" id="minhaDiv3">
    <div >

    </div>
  </div>
</section>