如何将对象数组转换为表格数据？

Question

我有对象的数组： -

[{ 
    "TaAddClaim": { 
     "claim_id": "CL462573115516", 
     "date": "2016-11-08" 
    }, 
    "Employee": { 
     "full_name": "Admin User" 
    } 
}, { 
    "TaAddClaim": { 
     "claim_id": "CL67258688282", 
     "date": "2016-11-08" 
    }, 
    "Employee": { 
     "full_name": "Admin User" 
    } 
}, { 
    "TaPassAccount": { 
     "claim_id": "CL462573115516" 
    }, 
    "0": { 
     "total_expenses": "4436.00" 
    } 
}, { 
    "TaPassAccount": { 
     "claim_id": "CL67258688282" 
    }, 
    "0": { 
     "total_expenses": "3236.00" 
    } 
}] 

我想在HTML表中显示这些数据。我的表结构如下：

$.each(resp, function(indx, obj) { 
    if (obj.TaAddClaim) { 
     table += '<tr>'; 
     table += '<td>' + obj.TaAddClaim.claim_id + '</td>'; 
     table += '<td>' + obj.TaAddClaim.date + '</td>'; 
     table += '<td>' + obj.Employee.full_name + '</td>'; 
    } 
}); 

现在的问题是，我无法在表格中显示的数据total_expenses。

如果claim_id的TaAddClaim与TaPassAccount的claim_id匹配，我想要显示total_expenses的数据。

在此先感谢。

Answer 1

建立一个从claim_id“地图”在响应迭代再次以使其前值：

var claimTotals = {}; 
$.each(resp, function(indx, obj) { 
    if (obj.TaPassAccount) { 
     claimTotals[obj.TaPassAccount.claim_id] = obj[0].total_expenses; 
    } 
}); 

然后，您可以参考claimTotals[obj.TaAddClaim.claim_id]以获得所需的值。

Answer 2

您需要添加第一循环内其他每个循环，才能够找到“total_expences”为每个“claim_id”

$.each(resp, function(indx, obj) { 
    if (obj.TaAddClaim) { 
     table += '<tr>'; 
     table += '<td>' + obj.TaAddClaim.claim_id + '</td>'; 
     table += '<td>' + obj.TaAddClaim.date + '</td>'; 
     table += '<td>' + obj.Employee.full_name + '</td>'; 
     $.each(resp, function(indx, obj2) { 
      if(obj2.TaPassAccount){ 
       if(obj2.TaPassAccount.claim_id == obj.TaAddClaim.claim_id){ 
        table += '<td>' + obj2['0'].total_expenses + '</td>'; 
       } 
      } 
     }); 
    } 
}); 

Runnable的例子： https://jsfiddle.net/yuxg19c8/2/

根据参宿一评论，为了降低算法的复杂性，你也可以这样做。首先，你正在收集所有“total_expenses”。然后在你的桌子上使用它们。

var claimTotalExpenses = {}; 
    $.each(resp, function(indx, obj) { 
      if(obj.TaPassAccount){ 
       claimTotalExpenses[obj.TaPassAccount.claim_id] = obj['0'].total_expenses; 
      } 
     }); 

    var table = '<table>'; 
    $.each(resp, function(indx, obj) { 
     if (obj.TaAddClaim) { 
      table += '<tr>'; 
      table += '<td>' + obj.TaAddClaim.claim_id + '</td>'; 
      table += '<td>' + obj.TaAddClaim.date + '</td>'; 
      table += '<td>' + obj.Employee.full_name + '</td>'; 
      if(claimTotalExpenses.hasOwnProperty(obj.TaAddClaim.claim_id)){ 
       table += '<td>' + claimTotalExpenses[obj.TaAddClaim.claim_id] + '</td>'; 
      } 
      table += '</tr>'; 
     } 
    }); 
    table += '</table>'; 

Runnable的例子：https://jsfiddle.net/477z59oa/