Why isn't data rendering on my template from my Angular scope?

Question

My angular file looks like this:

angular.module('myApp', [
  'ngResource',    
  'ngRoute',       
])

// Creating our routes
.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider
      .when('/professors', {
        controller : 'ProfessorListController',
        templateUrl : 'static/templates/partials/professor_list.html'
      })
      .when('/professors/:professor_id', {
        controller : 'ProfessorDetailController',
        templateUrl : 'static/templates/partials/professor_detail.html'
      })
      .otherwise({ redirectTo : '/' });
  }
])

// Getting all the professors from the API
.factory('Professor', [
  '$resource', function($resource) {
    return $resource('/api/professors/:id', {
      id: '@id'
    });
  }
])

// Creating a controller containing all the professors
.controller('ProfessorListController', [
  '$scope', 'Professor', function($scope, Professor) {
    return $scope.professor_list = Professor.query();
  }
])

// Creating a controller containing a particular professor
.controller('ProfessorDetailController', [
    '$scope', '$routeParams', 'Professor', 
    function($scope, $routeParams, Professor) {
      return $scope.professor_detail = Professor.query({
        id: $routeParams.professor_id
      });
    }
]);

The professor list view works and is rendering data properly. However, when I go to say

/#/professors/2

its just an empty page with nothing on it. My api seems to be working since if I go to /api/professors/2, it gives me the details of the professors with id=2 as JSON.

My template professor_detail.html looks like this:

<div>
    <div class="text-center" ng-repeat="prof in professor_detail">
        <h3>{{prof.name}}</h3>
        <p>{{prof.university}}</p>
        <p>{{prof.department}}</p>
        <p>{{prof.overall}}</p>
        <br />
    </div>
</div>

Also, in case you are wondering, I can see from my terminal that the app is finding the template (Http status 200) and also getting the data from the API (GET HTTP status 200). So what am I doing wrong?

Any help is appreciated!

Edit: Alright, when I go to #/professors/2, I get the following error in my browser error console:

Error: [$resource:badcfg] http://errors.angularjs.org/1.5.0/$resource/badcfg?p0=query&p1=array&p2=object&p3=GET&p4=%2Fapi%2Fprofessors%2F2
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:6:421
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js:11:51
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:126:506
$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:141:47
$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:138:145
$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:141:348
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:94:145
t@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:98:261
onload@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:99:298

Any idea what this is?

Could you check if the data returned from the API call is details of the correct professor? You could check this in your browsers developer tools. — nipuna-g
– nipuna-g, Commented Feb 16, 2016 at 5:28

Community · Accepted Answer · 2017-05-23 12:23:17Z

1

You should be using Professor.query instead of Professor.get as the query function expects an Array as the returned value.

.query works in the first request as you are returned with a list(an Array) of professors, but once you return only a single professor object, this function fails.

refer: https://stackoverflow.com/a/26093452/3156644

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Feb 16, 2016 at 6:20

nipuna-g

6,7023 gold badges33 silver badges54 bronze badges

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

Comments

nabin · Accepted Answer · 2016-02-16 06:06:41Z

1

Your error log first line https://docs.angularjs.org/error/$resource/badcfg?p0=query&p1=array&p2=object&p3=GET&p4=%2Fapi%2Fprofessors%2F2 Documentation says:

This error occurs when the $resource service expects a response that can be deserialized as an array but receives an object, or vice versa. By default, all resource actions expect objects, except query which expects arrays.

answered Feb 16, 2016 at 6:06

nabin

6874 silver badges13 bronze badges

Collectives™ on Stack Overflow

Why isn't data rendering on my template from my Angular scope?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related