Dynamic table rendering by JSON data

Question

I have something challenging requirement and looking for solution to render it dynamically. I would request experts to help me on below requirement.

I need to render the data as per the above format and json data looks below

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

use below template and update as per the your solution if required.

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

It will be great helpful and appreciated your help.

Thanks

Faly · Accepted Answer · 2017-02-09 09:11:43Z

You have to preprocess your data to ease rendering it in view. Transform your data into two-dimensional form: processedData[Month][Stat] = visits By default, it seems angular sort object's elements by key in ng-repeat, you can arrange the sorting to suit your need.

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

Thanks Faly. Appreciated your time and efforts. I need to render columns dynamically and also an issue in display(due to array sorting internally). I will handle those things my self. once again appreciated your help.

Collectives™ on Stack Overflow

Dynamic table rendering by JSON data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related