通过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数据呈现动态表格

回答

相关问题