Implement table with both row and column headers in angularjs

Question

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

You need to impement table with an empty row if there is no response from json? — Kanya Ravi
– Kanya Ravi, Commented Mar 9, 2017 at 9:01
Yes @Kanya. It should just show row and column headers with empty table. — Tanuj
– Tanuj, Commented Mar 9, 2017 at 9:32

Robert Sandu · Accepted Answer · 2017-03-09 09:01:36Z

1

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

]
}
);
});

answered Mar 9, 2017 at 9:01

Robert Sandu

6731 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tanuj Over a year ago

This solution works fine but I was just wondering if there is a better way to achieve this.

Robert Sandu Over a year ago

Not really. I mean, you could replace the hardcoded array with a for loop that will generate the intervals but I don't see how you can improve this other than that. But I have to say that I don't like the idea to show the user this kind of information if an error occurs. The user could think that the schedule is empty. I think you should inform it that an error has occurred.

Tanuj Over a year ago

I just shared a plunker example for this issue but in my actual application showing empty response to the user is a valid scenario. Thanks for the help @robert.

Robert Sandu Over a year ago

I'm glad I could help

Collectives™ on Stack Overflow

Implement table with both row and column headers in angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related