Using AngularJS's $resource to query a database

Question

I've created an API that works via a url, built on node.js, express.js, mongoDB and angular.js.

My API is called like this:

app.get('/api/posts/:query', api.postsQuery);

So if I type localhost:3000/api/posts/<whateverquery>, mongoDB spits out all the pertinent JSON to my browser, so this is working just fine.

However, I'm trying to link this up to my Angular front-end, and it's causing issues. I want the user to be able to search into a form and have my database return the correct records. Here's my controller:

function indexCtrl($scope, $http, $resource) {
  $scope.itemSearch = $resource('http://localhost\\:3000/api/posts/:query', 
    {query:''}, {get:{method:'JSONP'}});

  $scope.doSearch = function(){
    $scope.posts = $scope.itemSearch.get({query:$scope.searchTerm});
    console.log($scope.posts[1]) // returns undefined
  }
}

My issue is that when I run $scope.doSearch, I see the query in Chrome's resources panel like this: enter image description here so the correct data is indeed being loaded, but it's not attaching itself to $scope.posts.

I have the feeling this might be because I need a callback function; I tried using callback: JSON_CALLBACK but that messes up my query/API (because it adds a ?callback=...to the end of the $resource call and this breaks the query).

Any ideas on what I can do here to get it working? Is the problem a lack of a callback? Perhaps I can add some regex to the app.get call, after :query to allow any wildcards afterward>

rGil · Accepted Answer · 2013-07-09T23:53:45.810

2

Add the callback to your $resource call:

$scope.doSearch = function(){
    $scope.itemSearch.get({query:$scope.searchTerm}, function(data){
        $scope.posts = data.posts;
        console.log($scope.posts[1]);
    });
};

Notice in the docs that they utilize the callback:

var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(u, getResponseHeaders){
    u.abc = true;
    u.$save(function(u, putResponseHeaders) {
    //u => saved user object
    //putResponseHeaders => $http header getter
    });
});

edited Jul 09 '13 at 23:53

answered Jul 09 '13 at 16:17

rGil

3,719
1
22
30

While the other answers had callbacks, yours had the idea to wait until the callback to make `$scope.posts=data` which got it working. A slight correction though, if you look at the screenshot in my original question, the post data is returned in `data.posts` so I needed to make `$scope.posts = data.posts` to get it working. Thanks! – JVG Jul 09 '13 at 23:49

score 1 · Answer 2 · answered Jul 09 '13 at 16:13

Based on a looksie through the docs (and knowing AngularJS does everything asynchronously normally) it looks like the code below should work

$scope.doSearch = function(){
    $scope.posts = $scope.itemSearch.get({query:$scope.searchTerm}, function(){
        console.log($scope.posts[1]) // hopefully is something
    });
  }

http://docs.angularjs.org/api/ngResource.$resource

Since things are done asynchronously (to avoid blocking/waiting/pausing) there's usually either a callback or a promise for anything that is likely to take time (network calls).

score 1 · Answer 3 · answered Jul 09 '13 at 16:21

The "Angular" way to solve this problem is by using the $q library for promises.

function indexCtrl($scope, $resource, $q) {
  var defer = $q.defer();

  var resource = $resource('http://localhost\\:3000/api/posts/:query', {query:''}, {get:{method:'JSONP'}});

  resource.get({query:'mySearchQuery'}, defer.resolve);

  defer.promise.then(function(data) {
    $scope.posts = data;
  });
}

Using AngularJS's $resource to query a database

3 Answers3

Linked