JSONレスポンスを解析し、日付を賢明にグループ化し、javascriptの表に賢明に頭を付けるにはどうすればいいですか？

Question

これは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 

今までの私のコード（それが役立つかどうかわからない）

angular.forEach(response, 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); 
     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; 
       rows.push(obj); 

      }     

     }); 
     // 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コード：

<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> 

たぶん私はいくつかの簡単なリンクを紛失していますが、どんな助けも高く評価されます。

私はこんにちは、私は説得力のある方法でテーブルを表示する方法を発見したバックエンド

Answer 1

のフロントエンドとのNode.js上で角度の.jsを使用しています。誰かが同じ問題に遭遇するのを助けることを願っています。

私は、特定の日付が繰り返されないようにカウンタを使用しています。また、配列と関数を含むため、重複はありません。

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

       }); 
      } 
     }); 
    }); 

これは動作するコードです。