Display table data in tabular format in angular js

Question

I am new in angular js, I want to display json data in tabular format, I have such Json as below

 {
"cars": [{
        "name": "Ford",
        "models": [{
                "state": "MH",
                "model": "Fiesta"
            },
            {
                "state": "BHR",
                "model": "Focus"
            },
            {
                "state": "DL",
                "model": "Mustang"
            }
        ]
    },
    {
        "name": "BMW",
        "models": [{
                "state": "MH",
                "model": "320"
            },
            {
                "state": "BHR",
                "model": "X3"
            },
            {
                "state": "DL",
                "model": "X5"
            }
        ]
    },
    {
        "name": "Fiat",
        "models": [{
                "state": "MH",
                "model": "300"
            },
            {
                "state": "BHR",
                "model": "Panda"
            },
            {
                "state": "DL",
                "model": "Punto"
            }
        ]
    }
]
}

I want to use above JSON and display table in below format table format data

and I have tried following angular js code

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
   $scope.records = {
   "name": "John",
   "age": 30,
   "cars": [
     {
       "name": "Ford",
       "models": [
         {
           "state": "MH",
           "model": "Fiesta"
         },
         {
           "state": "BHR",
           "model": "Focus"
         },
         {
           "state": "DL",
           "model": "Mustang"
         }
       ]
     },
     {
       "name": "BMW",
       "models": [
         {
           "state": "MH",
           "model": "320"
         },
         {
           "state": "BHR",
           "model": "X3"
         },
         {
           "state": "DL",
           "model": "X5"
         }
       ]
     },
     {
       "name": "Fiat",
       "models": [
         {
           "state": "MH",
           "model": "300"
         },
         {
           "state": "BHR",
           "model": "Panda"
         },
         {
           "state": "DL",
           "model": "Punto"
         }
       ]
     }
   ]
 }

});

<!DOCTYPE html>
    <html>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
       <body ng-app="myApp" ng-controller="myCtrl">
          <table border=1>
             <tbody ng-repeat="row in records.cars">
                <tr>
                   <th>State</th>
                   <th>{{row.name}}</th>
                </tr>
                <tr ng-repeat="sub in row.models">
                   <td>{{sub.state}}</td>
                   <td>{{sub.model}}</td>
                </tr>
             </tbody>
          </table>

       </body>
    </html>

but after running above code I am getting below result,

result Image

what is the way to solve this issue ?

you need to change the structure of the object – Robert Ravikumar May 05 '18 at 03:28 — Robert Ravikumar, May 05 '18 at 03:28

score 0 · Answer 1 · answered May 04 '18 at 23:02

you can't actually display your table in that format unless you change your records object. your current data is car oriented, but it seems you need it to be state oriented ! Maybe something like this :

             var app = angular.module("myApp", []);
             app.controller("myCtrl", function($scope) {
               $scope.records = {
                                  "name": "John",
                                  "age": 30,
                                  "states": [
                                  {
                                        "name": "MH",
                                        "ford": "Fiesta",
                                        "bmw": "320",
                                        "fiat": "300"
                                      },
                                      {
                                        "name": "BHR",
                                        "ford": "Focus",
                                        "bmw": "X3",
                                        "fiat": "Panda"
                                      },
                                      {
                                        "name": "DL",
                                        "ford": "Mustang",
                                        "bmw": "X5",
                                        "fiat": "Punto"                                      
                                      }
                                    ]
                                  }
                                });

<!DOCTYPE html>
    <html>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
       <body ng-app="myApp" ng-controller="myCtrl">
          <table border=1>
             <tbody >
                <tr>
                   <th>State</th>
                   <th>Ford</th>
                   <th>BMW</th>
                   <th>Fiat</th>
                </tr>

                <tr ng-repeat="row in records.states">
                   <th>{{row.name}}</th>
                   <th>{{row.ford}}</th>
                   <th>{{row.bmw}}</th>
                   <th>{{row.fiat}}</th>
                </tr>
             </tbody>
          </table>

       </body>
    </html>

if you need some insight to reformat your records object you can check out this What is the most efficient method to groupby on a JavaScript array of objects?

score 0 · Answer 2 · answered May 04 '18 at 23:46

Sort and map the data records:

$scope.cols = $scope.records.cars.map(x => x.name);
$scope.states = $scope.records.cars[0].models.map(x => x.state);
$scope.getModel = function(stateIndex,colIndex) {
    return $scope.records.cars[colIndex].models[stateIndex].model;
};

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = {
       "name": "John",
       "age": 30,
       "cars": [
         {
           "name": "Ford",
           "models": [
             {
               "state": "MH",
               "model": "Fiesta"
             },
             {
               "state": "BHR",
               "model": "Focus"
             },
             {
               "state": "DL",
               "model": "Mustang"
             }
           ]
         },
         {
           "name": "BMW",
           "models": [
             {
               "state": "MH",
               "model": "320"
             },
             {
               "state": "BHR",
               "model": "X3"
             },
             {
               "state": "DL",
               "model": "X5"
             }
           ]
         },
         {
           "name": "Fiat",
           "models": [
             {
               "state": "MH",
               "model": "300"
             },
             {
               "state": "BHR",
               "model": "Panda"
             },
             {
               "state": "DL",
               "model": "Punto"
             }
           ]
         }
       ]
    };
    $scope.cols = $scope.records.cars.map(x => x.name);
    $scope.states = $scope.records.cars[0].models.map(x => x.state);
    $scope.getModel = function(stateIndex,colIndex) {
        return $scope.records.cars[colIndex].models[stateIndex].model;
    }; 
});

<!DOCTYPE html>
    <html>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
       <body ng-app="myApp" ng-controller="myCtrl">
          <table border=1>
             <tbody>
                <tr>
                   <th>State</th>
                   <th ng-repeat="col in cols">{{col}}</th>
                </tr>
                <tr ng-repeat="state in states" ng-init="stateIndex=$index">
                   <td>{{state}}</td>
                   <td ng-repeat="col in cols">
                        {{getModel(stateIndex,$index)}}
                   </td>
                </tr>
             </tbody>
          </table>

       </body>
    </html>

Slava Utesinov · Accepted Answer · 2018-05-12T06:59:11.500

You almost done it by yourself. If each state has car model of each company, just add float: left style:

angular.module("myApp", []).controller("myCtrl", function($scope) {
   $scope.records = {
   "name":"John",
   "age":30,
   "cars":[{
        "name":"Ford",
        "models":[
            {"state":"MH","model":"Fiesta"},
            {"state":"BHR","model":"Focus"},
            {"state":"DL","model":"Mustang"}
          ]
      }, {
        "name":"BMW",
        "models":[
            {"state":"MH","model":"320"},
            {"state":"BHR","model":"X3"},
            {"state":"DL","model":"X5"}
          ]
      }, {
        "name":"Fiat",
        "models":[
            {"state":"MH","model":"300"},
            {"state":"BHR","model":"Panda"},
            {"state":"DL","model":"Punto"}
          ]
      }]
    }
});

.column {
   float: left
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

 <body ng-app="myApp" ng-controller="myCtrl">
    <table border=1>
       <tbody ng-repeat="row in records.cars" class='column' ng-init='first=$first'>
          <tr>
             <th ng-if='first'>State</th>
             <th>{{row.name}}</th>
          </tr>
          <tr ng-repeat="sub in row.models | orderBy : 'state'">
             <td ng-if='first'>{{sub.state}}</td>
             <td>{{sub.model}}</td>
          </tr>
       </tbody>
    </table>
 </body>

Excellent!! That's Very Good Solution and Worked for me. Thank You so Much. — PrashantS, May 11 '18 at 20:35

Display table data in tabular format in angular js

3 Answers3