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

时间:2016-12-06 09:19:59

标签: javascript jquery arrays

我有一个对象数组: -

[{
    "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数据。

如果total_expenses的{​​{1}}与claim_id的{​​{1}}匹配,我想显示TaAddClaim数据。

提前致谢。

2 个答案:

答案 0 :(得分: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]获取所需的值。

答案 1 :(得分:1)

你需要在第一个循环中添加另一个循环,以便能够为每个“claim_id”找到“total_expences”

$.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/

根据Alnitak的评论,为了降低算法复杂度,你也可以这样做。首先,您要收集所有“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>';

可运行的示例:https://jsfiddle.net/477z59oa/