Accessing JSON with restangular or $resource in AngularJS

Question

I have done all the reading I could, but I am missing something to use AngularJS with the Django Rest framework. To solve the "trailing slash" issue, I am using restangular. The relevant parts of my module:

var demoApp = angular.module('demoApp', ['ngResource', 'djangoRESTResources', 'restangular']);

demoApp.config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

demoApp.factory('CbgenRestangular', function(Restangular) {
return Restangular.withConfig(function(RestangularConfigurer) {
    RestangularConfigurer.setBaseUrl('http://localhost:1234');
});
});

demoApp.controller('SimpleController', function($scope, simpleFactory, CbgenRestangular, $location){

var lCems = CbgenRestangular.all("cemeteries/");

   $scope.cemeteries = lCems.getList().then(function(cemeteries) {
      console.log(cemeteries[0]);
   }, function(response) {
      console.log(response);
   });

TcpMon seems to show the correct response:

HTTP/1.0 200 OK
Date: Wed, 14 Aug 2013 18:47:04 GMT
Server: WSGIServer/0.1 Python/2.7.5
Vary: Accept, Cookie
Content-Type: application/json; charset=utf-8
Allow: GET, POST, HEAD, OPTIONS

[{"id": 2, "name": "Trinity Anglican New", "latitude": "N 46 14.041", "longitude": "W 060 13.170", "url": "http://127.0.0.1:1234/cemeteries/2/", "api_url": "#/cemeteries/2"}, {"id": 3, "name": "St. John's Anglican New", "latitude": "N 45 30.697", "longitude": "W 061 01.125", "url": "http://127.0.0.1:1234/cemeteries/3/", "api_url": "#/cemeteries/3"}, {"id": 4, "name": "Holy Rosary", "latitude": "N 46 03.139", "longitude": "W 060 48.479", "url": "http://127.0.0.1:1234/cemeteries/4/", "api_url": "#/cemeteries/4"}]

But how do I access it? This code doesn't work in my view:

<ul>
    <li data-ng-repeat="cem in cemeteries | filter:filter.name">{{ cem.name }}</li>
</ul>

Do I need to manually parse the json? If yes, how? Thanks in advance for any help.

Regards, Phil

Check out my seed Angularjs/Django-Rest-Framework. It has everything set up for working with django rest. I'm sure it would help. — Zack Argyle
– Zack Argyle, Commented Aug 14, 2013 at 19:50
Hi, I tried to use it, but it failed with DatabaseError: no such table: authtoken_token. I do not know Fabric, so I am not sure what steps to take next. — Phil
– Phil, Commented Aug 14, 2013 at 20:46
Hey Philippe, at what point did it give you that error? It looks like you probably need to run "python manage.py migrate". Let me know if that works for you. — Zack Argyle
– Zack Argyle, Commented Aug 14, 2013 at 21:11
Thanks Zack, that did it. However, I am too much of a beginner to understand really well what is happening in the services.js file. It obviously works now, but I am not sure how I can apply it to my application. — Phil
– Phil, Commented Aug 14, 2013 at 21:32
Oh I understand, that portion looks a little intense. All it does, is creates resource objects out of your "endpoints" from constants.js, that way you can say User.query() and get all the Users from the database. — Zack Argyle
– Zack Argyle, Commented Aug 14, 2013 at 22:15

zs2020 · Accepted Answer · 2013-08-14 20:13:45Z

1

Do assignment in the callback function.

   lCems.getList().then(function(cemeteries) {
      //when successful
      $scope.cemeteries = cemeteries;
   }, function(response) {
      //when failed
      console.log(response);
   });

edited Aug 14, 2013 at 20:13

answered Aug 14, 2013 at 19:47

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

5 Comments

Phil Over a year ago

Yes, but the problem seems to be that the promise is failing. I.e. I can see the response object in the console, but the assignment never happens.

zs2020 Over a year ago

@Philippe Looks like CbgenRestangular is not correctly injected.

Phil Over a year ago

Would you kindly suggest a strategy to troubleshoot this issue? I cannot see anything obvious in my code above to explain why it would not be injected properly. Thanks in advance.

zs2020 Over a year ago

This line of code demoApp.controller('SimpleController', function($scope, simpleFactory, CbgenRestangular, $location), I assume you know how to inject the services. Obviously they don't match. And where did you define CbgenRestangular? Why you think Angularjs know how to interpret CbgenRestangular?

Phil Over a year ago

Isn't this part defining the service?

demoApp.factory('CbgenRestangular', function(Restangular) {             return Restangular.withConfig(function(RestangularConfigurer) {                 RestangularConfigurer.setBaseUrl('http://localhost:8000');             });         });

Phil · Accepted Answer · 2013-08-16 11:10:32Z

0

This is a CORS issue. After adding the django-cors-headers app to the Django rest framework, it worked fine.

answered Aug 16, 2013 at 11:10

Phil

8872 gold badges11 silver badges23 bronze badges

Collectives™ on Stack Overflow

Accessing JSON with restangular or $resource in AngularJS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related