通過JSON數據呈現動態表格

我有一些具有挑戰性的要求，並尋找解決方案來動態呈現它。我會請專家來幫助我解決以下問題。通過JSON數據呈現動態表格

我需要呈現的數據按照上面的格式，如果需要JSON數據看起來以下的模板和更新

[ { Region: 'India'  State: 'MH'  Month: 'jan-16'  visits: 10230157 }, { Region: 'India'  State: 'DL'  Month: 'jan-16'  visits: 20023423 }, { Region: 'India'  State: 'TL'  Month: 'jan-16'  visits: 38023804 }, { Region: 'India'  State: 'RJ'  Month: 'jan-16'  visits: 65102322 }, { Region: 'India'  State: 'KN'  Month: 'jan-16'  visits: 80234109 } ]

用作按照您的解決方案。

<div class="tablecontainer" ng-if="groups.length > 0" ng-repeat="cat in groups"> 
    <div class="row rowspace"> 
     <div>{{cat.group.name}}</div> 
     <div ng-if="cat.group.columns.length>0" ng-repeat="column in cat.group.columns"> 
      <div>{{column.name}}</div> 
     </div> 
    </div> 
    <div class="row"> 
     <table class="table table-striped table-bordered"> 
      <tr> 
       <th ng-repeat="column in cat.cols">{{column}}</th> 
      </tr> 
      <tr ng-repeat="row in cat.rows"> 
       <td ng-repeat="column in cat.cols">{{row[column]}}</td> 
      </tr> 
     </table> 
    </div> 
</div>

這將是非常有益的，並感謝您的幫助。

謝謝

來源

2017-02-08 Siva P

您必須對數據進行預處理，以便於在視圖中進行渲染。將數據轉換爲二維形式：processedData [Month] [Stat] =訪問默認情況下，它通過ng-repeat中的鍵顯示角度排序對象的元素，您可以安排排序以適合您的需要。

<!DOCTYPE html> 
    <html> 
     <head> 
      <script src="js/angular.min.js"></script>     
      <script> 
       var app = angular.module("myApp", []); 
       app.controller("myCtrl", function ($scope) { 
       $scope.datas = [{ Region: 'India', State: 'MH', Month: 'jan-16', visits: 10230157}, 
           { Region: 'India', State: 'DL', Month: 'jan-16', visits: 20023423}, 
           { Region: 'India', State: 'TL', Month: 'jan-16', visits: 38023804}, 
           { Region: 'India', State: 'RJ', Month: 'jan-16', visits: 45102322}, 
           { Region: 'India', State: 'KN', Month: 'jan-16', visits: 50234109}, 
           { Region: 'India', State: 'MH', Month: 'fev-16', visits: 60023423}, 
           { Region: 'India', State: 'DL', Month: 'fev-16', visits: 70023423}, 
           { Region: 'India', State: 'TL', Month: 'fev-16', visits: 88023804}, 
           { Region: 'India', State: 'RJ', Month: 'fev-16', visits: 95102322}, 
           { Region: 'India', State: 'KN', Month: 'fev-16', visits: 10234109} 
     ]; 
       $scope.processedDatas = {}; 
       $scope.datas.forEach(el => { 
        if (!(el.Month in $scope.processedDatas)) { 
         $scope.processedDatas[el.Month] = {}; 
        } 
        $scope.processedDatas[el.Month][el.State] = el.visits; 
       }); 

       console.log("Processed data: ", $scope.processedDatas); 
      }); 

      </script> 
     </head> 

     <body ng-app="myApp" ng-controller="myCtrl"> 
      <table> 
       <tr> 
        <th> Region</th> 
        <th col-span="5"> State </th> 
       </tr> 
       <tr> 
        <th>India</th> 
        <th>DL</th> 
        <th>KN</th> 
        <th>MH</th> 
        <th>RJ</th> 
        <th>TL</th> 
       </tr> 
       <tr> 
        <th>Month</th> 
        <th>Visits</th> 
        <th>Visits</th> 
        <th>Visits</th> 
        <th>Visits</th> 
        <th>Visits</th> 
       </tr> 
       <tr ng-repeat="(rowKey, rowValue) in processedDatas"> 
        <td>{{rowKey}}</td> 
        <td ng-repeat="visits in rowValue"> {{visits}} </td> 
       </tr> 
      </table> 
     </body> 

    </html>

來源

2017-02-09 09:11:43 Faly

謝謝Faly。讚賞你的時間和努力。我需要動態呈現列，並且還需要顯示一個問題（由於內部數組排序）。我會處理我自己的這些事情。再次感謝您的幫助。 –

通過JSON數據呈現動態表格

回答

相關問題