Angular REST client ngResource can't get json

Question

I have simple RESTful server with Flask and I like to make a simple client with AngularJS using ngResource. The idea is make a GET to the server, and obtain a json file.

This is my services.js

var IpZapServices = angular.module('IpZapServices', ['ngResource']);
IpZapServices.factory('Plug', ['$resource', function($resource) {
    return $resource('http://localhost:8003/api/plugs/:id',
             {id : "@id"}, {
                 query: {method: 'GET', params: {}, isArray: false}
           });
}]);

And the controllers.js

var IpZapControllers = angular.module('IpZapControllers', []);
IpZapControllers.controller('PlugListCtrl', ['$scope', 'Plug', function($scope, Plug) {
    $scope.plugs = Plug.query();
    console.log($scope.plugs);
}]);

But, I don't get the json file, get this:

Object { $promise: Object, $resolved: false }

Why? What's I do wrong? Thanks!

EDIT:

This is the raw response that I receipt from the server.

{"plugs": [
    {"alarm": [],
     "id": 0,
     "name": "Plug 0",
     "state": false},
    .
    .
    .
    {"alarm": [],
     "id": 3,
     "name": "Plug 3",
     "state": false}
]}

EDIT 2: Solution

The problem is in the server. Simply add to the server Flask-CORS and work!

from flask.ext.cors import CORS
app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

The solution is from this question

What does the Network tab of developer tools says? I would look the raw response that you receive — Mat, Dec 10 '15 at 20:49

FlorianTopf · Answer 1 · 2015-12-10T22:16:34.127

2

You need to resolve the promise you have created with Plug.query()

Try this:

Plug.query().$promise.then(function (response) {
     console.log(response)
     $scope.plugs = response;
});

More information on this can be found in the docs on angularjs.org:

https://docs.angularjs.org/api/ngResource/service/&dollar;resource

edited Dec 10 '15 at 22:16

answered Dec 10 '15 at 20:52

FlorianTopf

938
6
10

I have this error in the console: `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8003/api/plugs. (Reason: CORS header 'Access-Control-Allow-Origin' missing).` whats I can do? – F.N.B Dec 14 '15 at 11:54
This means you have to send CORS Headers from the backend serving the API. Have a look into this: http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work – FlorianTopf Dec 14 '15 at 18:31

score 1 · Answer 2 · answered Dec 10 '15 at 20:52

Try this:

var IpZapControllers = angular.module('IpZapControllers', []);
IpZapControllers.controller('PlugListCtrl', ['$scope', 'Plug', function($scope, Plug) {
  $scope.plugs = Plug.query();
  $scope.plugs.$promise.then(function (result) {
      console.log(result);
      $scope.plugs = result;
  });
}]);

Explanation:

Your call to query will not return the data immediately. It instead returns a promise object that will eventually get your data once the HTTP request is complete (notice that the console message said resolved: false).

Read More:

Promises in AngularJS, Explained as a Cartoon

I have this error in the console: `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8003/api/plugs. (Reason: CORS header 'Access-Control-Allow-Origin' missing).` whats I can do? — F.N.B, Dec 14 '15 at 11:54

score 1 · Answer 3 · answered Dec 10 '15 at 20:53

It seems that you have a promise there.

Don't assign the return value of the function, you need to wait till the promise resolves or rejects

Try

Plug.query().$promise
    .then(function (response) {
         // success code here
     }) 
    .catch(function (err) {})

score 0 · Answer 4 · answered Dec 10 '15 at 20:52

Whwn connecting to a webapi from the controller, use the success and error promise from the method call.

Ctrl.$inject = ["$scope", "Service"];
function Ctrl($scope, Service) {

    Service.getJson().success(function (data) {
        $scope.json = data;
    })
    .error(function (data) {
        // data should show the error
    });
}

Angular REST client ngResource can't get json

4 Answers4