如何在javascript中解析JSON响应并将它们按日期和头部分组到一个表中？

这是我从API得到的示例响应

{"success":true,"transaction":[{"_id":"58efd5717ddda769f26793fc","transId":"Exp/04-17/17","trpId":"Trav/dfsd/04-17/12","tripId":"58efd4dc7ddda769f26793f8","userId":"58ac19eaec1e7e4628be6f01","expenseHeadId":"588f279b85cd494eb7989c83","expenseHeadName":"Conveyance Expenses","transactionAmount":799,"isReimbursible":true,"paymentMode":"Cash","travelPurpose":"Official","hodId":"58aac3cb35c7194023da4777","clientId":"588f279b85cd494eb7989c80","fromCity":"Delhi","toCity":"Bhilai","fromCityId":"57f4aae6c0cd6b4cde54a514","toCityId":"583e0303e69a2e27ed7b416d","tripEndDate":"2017-04-27T18:30:00.000Z","policyDescription":"Not Applicable","expenseType":"general","__v":0,"hodApprovedTime":"2017-04-13T19:46:21.585Z","adminApprovedTime":"2017-04-13T19:47:55.910Z","accountsApprovedTime":"2017-04-13T20:07:30.097Z","paymentId":["58efda82f38d502c9e7fc5c1"],"isAccountsPaid":true,"isCancelled":false,"transactionStatus":"accounts-approved","isAccountsApproved":true,"isAdminApproved":true,"isHodApproved":true,"isDocUploaded":false,"createdTime":"2017-04-13T19:45:53.672Z"},{"_id":"58efd87af38d502c9e7fc5ba","transId":"Exp/04-17/18","trpId":"Trav/dfsd/04-17/12","tripId":"58efd4dc7ddda769f26793f8","userId":"58ac19eaec1e7e4628be6f01","expenseHeadId":"588f279b85cd494eb7989c85","expenseHeadName":"Travel","transactionAmount":1231,"isReimbursible":true,"paymentMode":"Draft","travelPurpose":"Official","hodId":"58aac3cb35c7194023da4777","clientId":"588f279b85cd494eb7989c80","fromCity":"Delhi","toCity":"Bhilai","fromCityId":"57f4aae6c0cd6b4cde54a514","toCityId":"583e0303e69a2e27ed7b416d","tripEndDate":"2017-04-27T18:30:00.000Z","policyDescription":"Not Applicable","expenseType":"general","__v":0,"hodApprovedTime":"2017-04-13T20:00:36.469Z","adminApprovedTime":"2017-04-13T20:00:53.898Z","accountsApprovedTime":"2017-04-13T20:03:39.801Z","paymentId":["58efd99bf38d502c9e7fc5bf"],"isAccountsPaid":true,"isCancelled":false,"transactionStatus":"accounts-approved","isAccountsApproved":true,"isAdminApproved":true,"isHodApproved":true,"isDocUploaded":false,"createdTime":"2017-04-13T19:58:50.678Z"}]}

我所要学习的是如何将角度页面上的数据显示为一个表，其中行标题是日期，列标题是响应中的“expenseHeadName”

我尝试过使用许多不同的技术，如嵌套循环等，但到目前为止，没有一种技术能令人满意地工作

例如，我希望表格如下所示：

DATE        TRAVEL     FOOD   LODGING   TOTAL
15 Jun-2017    250       300     400       950
17 June 2017   300       200       0       500

我的代码到现在为止（不确定这是否有用）

我的HTML代码：

<table class="table" id="expenses-report-table">
                                  <thead>
                                  <tr>

                                    <th ng-repeat="(header, value) in rows[0]">
                                      {{header | uppercase}}
                                    </th>
                                  </tr>
                                </thead>
                                    <tbody>
                                  <tr ng-repeat="row in rows">
                                    <td ng-repeat="cell in row">
                                      {{cell }}
                                    </td>
                                  </tr>
                                </tbody>
                                </table>

{{头|大写}}
{{cell}}

也许我错过了一些简单的链接，但任何帮助都将不胜感激

---

我在前端使用Angular.js，在后端使用Node.js。嗨，我找到了一种令人信服的方式来显示表格。我希望它能帮助遇到同样问题的人

我使用的是一个计数器，这样就不会重复某个特定的日期；我使用的是一个数组和一个include函数，这样就不会重复

var response1=[];
    var alreadydate=[];
    angular.forEach(response, function (value, key) 
                        {   
                            response1[key]=response[key];
                             var d =new Date(value.createdTime);
                            var d1 =d.setHours(0,0,0,0);
                            var date = new Date(d1);
                            response1[key].createdTime=date;
                        });

    angular.forEach(response1, function (value, key) {

        var obj={};
       //var d=new Date(value.createdTime);


       // var d =value.createdTime;
        var d =new Date(value.createdTime);
         var d5 =d.setHours(0,0,0,0);
        var d6=new Date(d5);
        var counter =0;
         angular.forEach(response, function (value1, key1) {

             var d1=value1.createdTime;
             var d1 = new Date(d1);
            var d2 =d1.setHours(0,0,0,0);
             var d3=new Date(d2);
            if (d6.getTime() == d3.getTime()) 
            {
                obj['date']=d3;

                 angular.forEach(expenseHeadsArray, function (value, key) 
                        {
                            obj[value.expenseHeadName] = 0;

                        });
                obj['total']=0;
                if (counter==0 && !(alreadydate.includes(d2)) )
                    {
                         rows.push(obj);
                        counter ++;
                    }
                alreadydate.push(d2);


            }                 

         });
      // obj['date']=d.toDateString();

    });



    angular.forEach(rows, function (value_rows, key_rows) {
        angular.forEach(response, function (value_resp, key_resp) {
            var d1 = new Date(value_rows.date);
            var d2 = new Date(value_resp.createdTime);
            var d3 =d2.setHours(0,0,0,0);
            var d4=new Date(d3);
           // if (angular.equals(value_rows.date, value_resp.createdTime)) {
             if (d1.getTime() == d4.getTime()) {
                angular.forEach(expenseHeadsArray, function (value_expenseHead, key_expenseHead) {
                    if (angular.equals(value_resp.expenseHeadName, value_expenseHead.expenseHeadName)) {
                        var exhead=value_expenseHead.expenseHeadName;

                        rows[key_rows][exhead] += value_resp.transactionAmount;
                        rows[key_rows].total += value_resp.transactionAmount;
                }

                });
            }
        });
    });

---

这是有效的代码。

您能显示您的HTML代码吗？@NNR已添加HTMLI在JSON响应中找不到字段（旅行、食物、住宿）。@NNR它将位于JSON响应中的“expenseHeadName”键下。我刚刚为示例表提供了一个示例。它可以被命名为任何关于这个问题的东西，比如我举了一个例子，其中有“运输费用”

var response1=[];
    var alreadydate=[];
    angular.forEach(response, function (value, key) 
                        {   
                            response1[key]=response[key];
                             var d =new Date(value.createdTime);
                            var d1 =d.setHours(0,0,0,0);
                            var date = new Date(d1);
                            response1[key].createdTime=date;
                        });

    angular.forEach(response1, function (value, key) {

        var obj={};
       //var d=new Date(value.createdTime);


       // var d =value.createdTime;
        var d =new Date(value.createdTime);
         var d5 =d.setHours(0,0,0,0);
        var d6=new Date(d5);
        var counter =0;
         angular.forEach(response, function (value1, key1) {

             var d1=value1.createdTime;
             var d1 = new Date(d1);
            var d2 =d1.setHours(0,0,0,0);
             var d3=new Date(d2);
            if (d6.getTime() == d3.getTime()) 
            {
                obj['date']=d3;

                 angular.forEach(expenseHeadsArray, function (value, key) 
                        {
                            obj[value.expenseHeadName] = 0;

                        });
                obj['total']=0;
                if (counter==0 && !(alreadydate.includes(d2)) )
                    {
                         rows.push(obj);
                        counter ++;
                    }
                alreadydate.push(d2);


            }                 

         });
      // obj['date']=d.toDateString();

    });



    angular.forEach(rows, function (value_rows, key_rows) {
        angular.forEach(response, function (value_resp, key_resp) {
            var d1 = new Date(value_rows.date);
            var d2 = new Date(value_resp.createdTime);
            var d3 =d2.setHours(0,0,0,0);
            var d4=new Date(d3);
           // if (angular.equals(value_rows.date, value_resp.createdTime)) {
             if (d1.getTime() == d4.getTime()) {
                angular.forEach(expenseHeadsArray, function (value_expenseHead, key_expenseHead) {
                    if (angular.equals(value_resp.expenseHeadName, value_expenseHead.expenseHeadName)) {
                        var exhead=value_expenseHead.expenseHeadName;

                        rows[key_rows][exhead] += value_resp.transactionAmount;
                        rows[key_rows].total += value_resp.transactionAmount;
                }

                });
            }
        });
    });