JS双维度分组问题：同一Id多负责人需生成对应表格

问题现状 #

当前代码通过reduce将data、data1、data2按Id分组后，渲染表格时会循环覆盖Responsavel变量，导致同一个Id下仅显示最后一位负责人的表格，无法为每位负责人生成独立的对应表格（比如Id=562有Amélia和Maria两位负责人，却只生成Maria的表格）。

解决方案 #

重构数据分组逻辑，将每个Id下的负责人列表和明细条目分开存储，再针对每个负责人单独渲染表格：

修改后的JS代码 #

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

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

var data2 = [
   {"Id": "552", "Responsavel": "antonio", },
   {"Id": "545", "Responsavel": "Pedro", },
   {"Id": "562", "Responsavel": "Amélia", },
   {"Id": "562", "Responsavel": "Maria", },
];

// 重构分组逻辑：分离负责人和明细
var groupedData = {};
// 先合并所有明细数据（data + data1）
var allItems = data.concat(data1);
allItems.forEach(item => {
  var id = item.Id;
  if (!groupedData[id]) {
    groupedData[id] = {
      responsaveis: [],
      items: []
    };
  }
  groupedData[id].items.push(item);
});
// 再添加负责人数据
data2.forEach(item => {
  var id = item.Id;
  if (groupedData[id]) {
    groupedData[id].responsaveis.push(item.Responsavel);
  }
});

$(document).on('click', '.dad-pagamento', function() {
  var linha = ``;
  // 遍历每个Id的分组数据
  Object.keys(groupedData).forEach(id => {
    var group = groupedData[id];
    // 为每个负责人生成一份表格
    group.responsaveis.forEach(responsavel => {
      linha += `<p class="taman" style="text-align:left"> ${responsavel}</p>
                <div class="teste">
                <table class="align-middle mb-0 table table-borderless table-striped table-hover" border="1">
                <thead>
                  <tr>
                    <th class="text-center">Nº Recibo</th>
                    <th class="text-center">Valor</th>
                    <th class="text-center">Descrição</th>
                  </tr>
                 </thead>                             
                 <tbody>`;
      // 渲染该Id下的所有明细条目
      group.items.forEach(item => {
        linha += `<tr>
                     <td class="text-center text-muted"> ${item.Id}</td>
                     <td class="text-center text-muted"> ${item.valor}</td>
                     <td class="text-center text-muted"> ${item.Descricao}</td>
                   </tr>`;
      })
      linha += `</tbody></table></div>`;
    });
  });
  $('#minhaDiv3').show();
  $('.pagmfalta').html(linha);
});

HTML代码（无需修改） #

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

<section id="s3">
  <div style="display:none" id="minhaDiv3">
    <button type="button" tabindex="0" class="dropdown-item" id="btnPrint" style="text-align:right;">Print</button>
    <div class="row pagmfalta"></div>
  </div>
</section>

关键改动说明 #

1. 数据分组重构：不再将负责人和明细混在同一个数组里，而是为每个Id创建包含responsaveis（负责人列表）和items（明细条目）的对象，避免数据覆盖。
2. 渲染逻辑调整：遍历每个Id时，再嵌套遍历该Id下的所有负责人，为每位负责人单独生成一份表格，确保每个负责人都有对应的明细表格。
3. 避免空值渲染：明细条目只取包含valor和Descricao的内容，避免表格中出现空单元格。

内容的提问来源于stack exchange，提问作者Bruno