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

미리보기가 쉽도록 데이터를 사전 처리해야합니다. 데이터를 2 차원 형식으로 변환합니다. processedData [월] [통계] = 방문수 : 기본적으로 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

감사합니다. 시간과 노력에 감사를 표합니다. 동적으로 열을 렌더링해야하며 디스플레이 정렬 문제가 내부적으로 배열 정렬로 인해 필요합니다. 나는 내 자신을 처리 할 것이다. 다시 한 번 도움을 주셨습니다. –

JSON 데이터로 동적 테이블 렌더링

답변

관련 문제