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

我正在做一个小项目的界面。基本上，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写了两次，它变得不友好了

我尝试的是：

$.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>';
});

$。每个（response.wallet\u交易、功能（索引）{
var exp\u name=response.wallet\u交易[索引]。费用类型\u name；
var数量=响应。钱包交易[索引]。总数量；
var价格=响应。钱包交易[指数]。总成本；
var trans\u type=响应。钱包交易[索引]。trans\u type；
行=行+“”+exp_name+“”；
行数=行数+“”+价格+“”；
行数=行数+“”+数量+“”；
行=行+“”；
});

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

---

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

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>";
}

var表_数据={}；
美元。每个（response.wallet\u交易，功能（i，trans）{
var exp\u name=交易费用类型\u name；
var数量=交易总数量；
var价格=交易总成本；
var trans_type=trans.trans_type；
如果（！表数据[exp\u name]）{
表\u数据[exp\u name]={}
}
表数据[exp\u name][trans\u type]={
数量:数量,，
成本：价格
};
}
$.each（表_数据、函数（名称、数据）{
行+=“”+名称+“”；
行+=“”+data.Rent.cost+“”；
行+=“”+数据.租金.数量+“”；
行+=“”+data.Purchased.cost+“”；
行+=“”+data.Purchased.quantity+“”；
行+=“”；
}

---

请注意，

$。每个

都将数组元素作为第二个参数传递给回调函数，因此您不必在每一行重复

响应.wallet\u事务[索引]

。

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

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>";
}

var表_数据={}；
美元。每个（response.wallet\u交易，功能（i，trans）{
var exp\u name=交易费用类型\u name；
var数量=交易总数量；
var价格=交易总成本；
var trans_type=trans.trans_type；
如果（！表数据[exp\u name]）{
表\u数据[exp\u name]={}
}
表数据[exp\u name][trans\u type]={
数量:数量,，
成本：价格
};
}
$.each（表_数据、函数（名称、数据）{
行+=“”+名称+“”；
行+=“”+data.Rent.cost+“”；
行+=“”+数据.租金.数量+“”；
行+=“”+data.Purchased.cost+“”；
行+=“”+data.Purchased.quantity+“”；
行+=“”；
}

---

请注意，

$。每个

都将数组元素作为第二个参数传递给回调函数，因此您不必重复

response.wallet\u事务[index]

在每一行。

JSON是否只有一个名称的数据，或者是否可以有多个名称，每个名称都有租金和购买费？JSON是否只有一个名称的数据，或者是否可以有多个名称，每个名称都有租金和购买费？