Dynamisches Tabellen-Rendering von JSON-Daten

Ich habe eine anspruchsvolle Anforderung und suche nach einer Lösung, um es dynamisch zu rendern. Ich würde Experten bitten, mir auf unter Anforderung zu helfen.Dynamisches Tabellen-Rendering von JSON-Daten

Ich brauche die Daten gemäß dem obigen Format und JSON-Daten sehen unter

[ { 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 } ]

Verwendung unter Vorlage und Aktualisierung gemäß der Ihrer Lösung zu machen, falls erforderlich.

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

Es wird sehr hilfreich und geschätzt Ihre Hilfe.

Dank

Quelle

2017-02-08 Siva P

Sie haben Ihre Daten Vorprozess Rendering es im Hinblick auf erleichtern. Verwandeln Sie Ihre Daten in zweidimensionale Form: processedData [Month] [Stat] = Visits Standardmäßig scheint eckig sort Objekt Elemente durch Schlüssel in ng-repeat, können Sie die Sortierung an Ihre Bedürfnisse anpassen.

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

Quelle

2017-02-09 09:11:43 Faly

Danke Faly. Schätzte Ihre Zeit und Bemühungen. Ich muss Spalten dynamisch darstellen und auch ein Problem in der Anzeige (aufgrund der Array-Sortierung intern). Ich werde mit diesen Dingen umgehen. Ich habe deine Hilfe noch einmal geschätzt. –

Dynamisches Tabellen-Rendering von JSON-Daten

Antwort

Verwandte Themen