CODEWITHSUNDEEP
angularjsdjango-rest-framework
Stefano De Rosso
Stefano De Rosso

Reputation: 1339

Angular template doesn't render data from controller

I'm setting up an Angular JS app to consume a Django REST API, and I'm stuck on the rendering of data.
I already asked another question (this), but the solution that I've been given doesn't work.

I was wondering that maybe there is something wrong in the API view, could it be a problem when trying to render the data from the Angular controller?

Anyway, this is my Angular app + template (edited as suggested in the other stackoverflow question)

base.html

<body ng-app="schoolApp" ng-controller="schoolCtrl as vm">
    <p>Hello {{vm.name}}!</p>
    <div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Classroom</th>
                    <th>School</th>
                    <th>Floor</th>
                    <th>Academic year</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="classroom in vm.classrooms">
                    <td>{{classroom.classroom}}</td>
                    <td>{{classroom.school.school_name}}</td>
                    <td>{{classroom.floor}}</td>
                    <td>{{classroom.academic_year}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

app.js

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

schoolApp.factory('Classroom', ['$resource', function($resource) {
    return $resource('/classrooms/?format=json', {}, {
        query: {
            method: 'GET',
            isArray: true,
        }
    });
}]);

schoolApp.controller('schoolCtrl', function($scope, Classroom) {
  var vm = this;
  vm.name = 'World';
   Classroom.query().$promise.then(function(data) {
     console.log('Success: '+JSON.stringify(data));
     vm.classrooms = data;

   }, function (reason) {
     console.log('ERROR: '+JSON.stringify(reason));
   });
});

I was thinking that maybe there is some problem on the view, so here's the REST API view

class HomePageView(TemplateView):
    template_name = 'school_app/base.html'

class StudentViewSet(viewsets.ModelViewSet):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer


class ClassroomViewSet(viewsets.ModelViewSet):
    queryset = Classroom.objects.all()
    serializer_class = ClassroomSerializer

What am I doing wrong?

UPDATE:

This is what I get

enter image description here

Data on the console: yes.
Data on the tables: no.

Upvotes: 0

Views: 163

Answers (2)

Alberto
Alberto

Reputation: 129

Have you tried to output in the html the content of the variable vm.classrooms.

You can do it with 

<pre>{{vm.classrooms|json}}</pre>

It seems to me that you are not binding correctly the variables inside the table,

i can't see it clearly in the picture, it can be {{ classroom.school.academic_year }} ??

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

As you are using controllerAs syntax, you have binded all data to controller context. So you could get data on view using its alias like vm.classrooms 

<tr ng-repeat="classroom in vm.classrooms">

Upvotes: 1

Related Questions