javascript - 以预定义格式的表格格式显示 JSON 数据

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]每行。