Group two getjson by id-CodePudding

I intend to group two queries in case the id of the first query is equal to the id_line of the second query. I'm trying this way, but it's not grouping.

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",  },
   {Id: "562", valor: "23.00", Descricao: "Caneta", },
   {Id: "562",  valor: "15.00", Descricao: "Caderno",  },
];

var data1 = [
   {Id_Linha: "552", valor:  "50.00", Descricao: "camisola", },
   {Id_Linha: "562", valor: "35.00", Descricao: "calças", },,
];

var results = data.reduce(function(results, org) {
  (results[org.Id] = results[org.Id] || []).push(org);
  return results;
}, {});

var results1 = data1.reduce(function(results1, org1) {
  (results1[org1.Id_Linha] = results1[org1.Id_Linha] || []).push(org1);
  return results1;
}, {});

$(document).on('click', '.dad-pagamento', function() {
  var linha = ``;
  Object.keys(results).forEach(i => {
  Object.keys(results1).forEach(p => {
    linha  = `<div>
              <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>`;
    })
    
    Object.keys(results1[p]).forEach(c => {

      Id_Linha = results1[p][c].Id_Linha;
      valor = results1[p][c].valor;
      Descricao = results1[p][c].Descricao;
      linha  = `<tr>
                   <td > ${Id_Linha}</td>
                   <td > ${valor}</td>
                   <td > ${Descricao}</td>
                 </tr>`;
    })
    
    
    
  });
  });
  $('#minhaDiv3').show();
  $(".pagmfalta").html(linha);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

I wanted to group the two getjson by the id and the Id_Linha, but it is not grouping.

In the case of the results1 variable, it is returning the lines even if the Id and Id_Linha variables are not equal. It should only return if both variables have the same value

Can anyone help me to solve this problem?

CodePudding user response：

To group the data from the two queries by the Id property from the first query and the Id_Linha property from the second query, you can use a single reduce function to create a single object that maps each unique Id value to an array containing the corresponding items from both queries.

Here is an example of how you could modify your code to do 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",  },
   {Id: "562", valor: "23.00", Descricao: "Caneta", },
   {Id: "562",  valor: "15.00", Descricao: "Caderno",  },
];

var data1 = [
   {Id_Linha: "552", valor:  "50.00", Descricao: "camisola", },
   {Id_Linha: "562", valor: "35.00", Descricao: "calças", },,
];

var results = data.concat(data1).reduce(function(results, item) {
  var id = item.Id || item.Id_Linha; // Use the "Id" property if it exists, otherwise use the "Id_Linha" property
  (results[id] = results[id] || []).push(item);
  return results;
}, {});

$(document).on('click', '.dad-pagamento', function() {
  var linha = ``;
  Object.keys(results).forEach(id => {
    linha  = `<div>
              <table  border="1">
              
              <thead>
                <tr>
                  <th >Nº Recibo</th>
                  <th >Data de Vencimento</th>
                  <th >Valor</th>
                </tr>
               </thead>                              
               <tbody>`;
    results[id].forEach(item => {
      var idValue = item.Id || item.Id_Linha; // Use the "Id" property if it exists, otherwise use the "Id_Linha" property
      var valor = item.valor;
      var descricao = item.Descricao;
      linha  = `<tr>
                   <td > ${idValue}</td>
                   <td > ${valor}</td>
                   <td > ${descricao}</td>
                 </tr>`;
    })
    linha  = `</tbody></table></div>`;
  });
  $('#minhaDiv3').show();