Using AngularJS $ resource to query the database
I created the API, which works through a URL-address is 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 applicable JSONs into my browser, so this works fine.
However I am trying to link this to my Angular frontend and it is causing problems. I want the user to be able to search the form and my database returned 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 problem is that when I run $scope.doSearch
I see a request in the Chrome resource bar like this: 
so the correct data is indeed loaded but not bind to $scope.posts
.
I have this feeling because I need a callback function; I tried to use callback: JSON_CALLBACK
but it messed up my request / API (because it adds ?callback=...
to the end of the call $resource
and it aborts the request).
Any ideas on what I can do here to get it working? Is the problem a downside to the callback? Maybe I can add some regex to the call app.get
after :query
to allow subsequent wildcards>
source to share
Add a 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]);
});
};
Note on the docs that they use a 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
});
});
source to share
Based on looking through the docs (and knowledge of AngularJS does everything asynchronously fine) 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 the operations are done asynchronously (to avoid blocking / waiting / suspending), there is usually either a callback or a promise for anything that can take time (network calls).
source to share
The "Angular" way to solve this problem is with 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;
});
}
source to share