How to print an array in table format using angularjs?

Question

I'm calling an API and want to print my JSON result in tabular format using anugularjs. So I've declared a hardcoded array(train) in a function(myfunc). Now I want to print the array in the table format. Here's the code i tried:

function myfunc() {
  var train = [{
      "TrainNo": "11043",
      "TrainName": "MADURAI EXPRESS",
      "Source": "LTT",
      "ArrivalTime": "03:50",
      "Destination": "PUNE",
      "DepartureTime": "00:15",
      "TravelTime": "03:35H",
      "TrainType": "EXP"
    },
    {
      "TrainNo": "16533",
      "TrainName": "BGKT SBC EXPRES",
      "Source": "KYN",
      "ArrivalTime": "04:10",
      "Destination": "PUNE",
      "DepartureTime": "01:05",
      "TravelTime": "03:05H",
      "TrainType": "EXP"
    }
  ];
}
myfunc();
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
  $scope.names = train;
});

<!DOCTYPE html>
<html>
<style>
  table,
  th,
  td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  
  table tr:nth-child(odd) {
    background-color: #f1f1f1;
  }
  
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

<body>

  <div ng-app="myApp" ng-controller="Ctrl">

    <table>
      <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Department</th>
      </tr>
      <tr ng-repeat="x in names">

        <td>{{x.TrainName}}</td>
        <td>{{x.TrainName}}</td>
        <td>{{x.Source}}</td>
        <td>{{x.Class}}</td>
        <td>{{ x.Department}}</td>
      </tr>
    </table>

  </div>

</body>

</html>

I've tried this code but still I'm still unable to insert data in the table.

score 1 · Answer 1 · answered Jul 04 '19 at 08:32

First things first. You've declared your variable train into your function so you cannot access it to your controller. Its not a good idea to make it as global variable either. Since you are using angularjs, you can use one of its main features called service (see it in my code below and see how I use it).

Second, you should always make your <th> count same as your <td>. In your code you have 3 <th> and 5 <td>

Third, You are calling properties that are not declared in your object. Always use properties that you've declared in your object.

You can run my code below to check the correct output

  
  var app = angular.module('myApp', []);
  
  app.service('TrainService', function() {
    var train = [{
        "TrainNo": "11043",
        "TrainName": "MADURAI EXPRESS",
        "Source": "LTT",
        "ArrivalTime": "03:50",
        "Destination": "PUNE",
        "DepartureTime": "00:15",
        "TravelTime": "03:35H",
        "TrainType": "EXP"
      },
      {
        "TrainNo": "16533",
        "TrainName": "BGKT SBC EXPRES",
        "Source": "KYN",
        "ArrivalTime": "04:10",
        "Destination": "PUNE",
        "DepartureTime": "01:05",
        "TravelTime": "03:05H",
        "TrainType": "EXP"
      }
    ];
    
    return { getTrain: getTrain };
    
    function getTrain() {
      return train;
    }
  });
  
  app.controller('Ctrl', function($scope, TrainService) {
    $scope.names = TrainService.getTrain();
  });

<!DOCTYPE html>
    <html>
    <style>
      table,
      th,
      td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
      }
      
      table tr:nth-child(odd) {
        background-color: #f1f1f1;
      }
      
      table tr:nth-child(even) {
        background-color: #ffffff;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.0.0.js">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>

    <body>

      <div ng-app="myApp" ng-controller="Ctrl">

        <table>
          <tr>
            <th>TrainNo</th>
            <th>Name</th>
            <th>Source</th>
            <th>Destination</th>
            <th>TrainType</th>
          </tr>
          <tr ng-repeat="x in names">

            <td>{{x.TrainNo}}</td>
            <td>{{x.TrainName}}</td>
            <td>{{x.Source}}</td>
            <td>{{x.Destination}}</td>
            <td>{{x.TrainType}}</td>
          </tr>
        </table>

      </div>

    </body>

    </html>

How to print an array in table format using angularjs?

1 Answers1