CODEWITHSUNDEEP
angularjshtml-tablerow
Tanuj
Tanuj

Reputation: 71

Implement table with both row and column headers in angularjs

I have a table which has both row as well as column headers. Currently the values of row headers are also present in the json which I retrieve to display in the table. So I have mapped the row header directly in angular expression. The problem is, if there is some error in retrieving the data from the json, the row headers will not be shown at all. I want to show the empty table with row as well as column headers in case of no response. Please tell me how it can be implemented. If I take out the row headers from json and make a table directly with row and column headers, how will I display the data received from json? Here is my code:

HTML 

<body ng-controller="jsonCtrl">    
<table class="table table-striped table-bordered">
<caption>Delivery slots:</caption>
<tr>
<td></td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr ng-repeat="data in timetable">
<th scope="row">{{data.time}}</th>
<td>{{data.Monday}}</td>
<td>{{data.Tuesday}}</td>
<td>{{data.Wednesday}}</td>
<td>{{data.Thursday}}</td>
<td>{{data.Friday}}</td>
</tr>
</table>
</body>

JS

var myApp  =  angular.module('myApp', []);

myApp.controller('jsonCtrl', function($scope, $http){
$http.get('timetable.json').success(function (data){
    $scope.timetable = data;
});
});

JSON

[
  {
    "Monday": "Physics",
    "Tuesday": "Chemistry",
    "Wednesday": "Maths",
    "Thursday": "English",
    "Friday": "Computers",
    "time": "09:00 - 11:00"
  },
  {
    "Monday": "Maths",
    "Tuesday": "Games",
    "Wednesday": "Physics",
    "Thursday": "Computers",
    "Friday": "Chemistry",
    "time": "11:00 - 13:00"
  },
  {
    "Monday": "Computers",
    "Tuesday": "Physics",
    "Wednesday": "Maths",
    "Thursday": "German",
    "Friday": "History",
    "time": "13:00 - 15:00"
  },
  {
    "Monday": "Accounts",
    "Tuesday": "Maths",
    "Wednesday": "Physics",
    "Thursday": "French",
    "Friday": "Chemistry",
    "time": "15:00 - 17:00"
  }

]

Here is the plunker link for better explanation. The 'time' present in the json needs to be the row header. https://plnkr.co/edit/SZP9tdRX7pD9oaT9uOR1?p=preview

Upvotes: 0

Views: 1066

Answers (1)

Robert Sandu
Robert Sandu

Reputation: 673

If the http call fails you can use an array like this :

[
  {
    "time": "09:00 - 11:00"
  },
  {
    "time": "11:00 - 13:00"
  },
  {
    "time": "13:00 - 15:00"
  },
  {
    "time": "15:00 - 17:00"
  }

]

So the controller have to be changed:

var myApp  =  angular.module('myApp', []);

myApp.controller('jsonCtrl', function($scope, $http){
$http.get('timetable.json').then(function (data){
    $scope.timetable = data;
},
//error callback
function (response){
$scope.timetable = [
  {
    "time": "09:00 - 11:00"
  },
  {
    "time": "11:00 - 13:00"
  },
  {
    "time": "13:00 - 15:00"
  },
  {
    "time": "15:00 - 17:00"
  }

]
}
);
});

Upvotes: 1

Related Questions