CODEWITHSUNDEEP
javascripthtmlangularjs
Shruti Vaishya
Shruti Vaishya

Reputation: 5

How to print an array in table format using angularjs?

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.

Upvotes: 0

Views: 219

Answers (1)

JkAlombro
JkAlombro

Reputation: 1824

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>

Upvotes: 1

Related Questions