如何將對象數組轉換爲表格數據？

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/