以预定义格式

Question

我正在开发一个小项目的界面。基本上，API会发送以下JSON数据：

{
"wallet_transactions": [
    {
        "total_cost": "80.000",
        "expense_type__name": "Gas",
        "total_quantity": "5.000",
        "trans_type": "Purchased"
    },
    {
        "total_cost": "250.000",
        "expense_type__name": "Gas",
        "total_quantity": "35.000",
        "trans_type": "Rent"
    }
]}

数据基本上显示了GAS的数量，成本和手段（信贷或购买）。

我试图直接建立一个表格，但由于GAS被写了两次，所以它变得不友好。

我尝试的是：

$.each(response.wallet_transactions, function(index) {
    var exp_name=response.wallet_transactions[index].expense_type__name;
    var quantity=response.wallet_transactions[index].total_quantity;
    var price=response.wallet_transactions[index].total_cost;
    var trans_type=response.wallet_transactions[index].trans_type;

    rows=rows+'<tr><td>' + exp_name + '</td>';
    rows=rows + '<td>' + price + '</td>';
    rows=rows + '<td>' + quantity + '</td>';
    rows=rows + '</tr>';
});

现在需要的输出如下图所示：

Answer 1

将每个名称的数据一起分组到另一个对象中，然后从中构建表。

var table_data = {};
$.each(response.wallet_transactions, function(i, trans) {
    var exp_name = trans.expense_type__name;
    var quantity = trans.total_quantity;
    var price = trans.total_cost;
    var trans_type = trans.trans_type;
    if (!table_data[exp_name]) {
        table_data[exp_name] = {}
    }
    table_data[exp_name][trans_type] = {
        quantity: quantity,
        cost: price
    };
}
$.each(table_data, function(name, data) {
    rows += "<tr><td>" + name + "</td>";
    rows += "<td>" + data.Rent.cost + "</td>";
    rows += "<td>" + data.Rent.quantity + "</td>";
    rows += "<td>" + data.Purchased.cost + "</td>";
    rows += "<td>" + data.Purchased.quantity + "</td>";
    rows += "</tr>";
}

请注意，$.each将数组元素作为第二个参数传递给回调函数，因此您不必在每一行上重复response.wallet_transactions[index]。