j-terranova j-terranova - 16 days ago 4
AngularJS Question

Angular HTTP API get request not being routed to the correct Express server function

I have an Angular application that needs to be able to get construct data from a MongoDB collection. I have two HTTP API calls (“query” and “get”) made from flConstruct to request data from the server. The “query” call returns all data and appears to be working fine. When I try to retrieve data for just one of the constructs I get an error. On the Server side I have a route.js that should be routing the call to the proper function in my constructs.js script. The “get” call should be routing to the construct.getConstructById but instead appears to be routing to constructs.getConstructs. Can anyone see what I might be doing wrong?

The error message I am getting is, “flCachedConstructs.queryID(...).$promise is undefined” but I think that it is a misleading message as the retrieved (collection) is different than expected (single document).

//flCachedConstructs

angular.module('app').factory('flCachedConstructs', function(flConstruct,$http, $q) {
var constructList = null; // temporarily set to null for testing purposes
var construct;

return {
queryID: function(constructId) {
console.log("flCachedConstruct - queryID function by ID - start");
console.log("flCachedConstruct - queryID function by ID - parameter = constructId " + constructId);
var deferred = $q.defer();
flConstruct.get(constructId, function(data) {
if (data) {
deferred.resolve(data);
}
else {
deferred.reject("Error getting Construct");
}
});
return deferred.promise;
},
queryAll: function() {
console.log("flCachedConstruct - queryAll function, no parameters - start");
if(!constructList || constructList == null) {
console.log("flCachedConstruct - querAlly function - if constructList is null or does not exits");
constructList = flConstruct.query();
}else
{
console.log("flCachedConstruct - queryAll function - if constructList is not null and does exits");
console.log("constructList = " + constructList );
}

return constructList;
},
empty: function() {
console.log("flCachedConstruct - empty function - start");
constructList = null;
console.log("flCachedConstruct - empty function - after setting constructList to null");
return constructList;
}

}
})


//flConstruct.js

angular.module('app').factory('flConstruct',function($resource){
var ConstructResource = $resource('/api/constructs/:id', {_id: "@id"}, {
query: { method: 'GET', isArray: true },
get: { method: 'GET', params: {id: '@id'} , isArray: false },
create: { method: 'POST'},
update: { method: 'PUT' },
delete: { method: 'DELETE', params: {id: '@id'}}
});

return ConstructResource;
});


//routes.js

var constructs = require('../controllers/constructs'),

module.exports = function(app){


app.get('/api/constructs', constructs.getConstructs);
app.get('/api/constructs/:id', constructs.getConstructById);

app.post('/api/constructs', constructs.createConstruct);
app.put('/api/constructs', constructs.updateConstruct);
app.delete('/api/constructs/:id', constructs.deleteConstruct);


app.all('/api/*', function(req,res){
res.sendStatus(404);
});

app.get('*', function ( req, res) {
res.render('index', {
bootstrappedUser: req.user
});
});
}



// construct.js

var Construct = require('mongoose').model('Construct');

exports.getConstructs = function(req,res){
var constructData = req.body;
console.log("Get - constructs.getConstructs");
console.log("constructData.id " + constructData.id);
console.log("constructData " + constructData);
console.log("req.params.id " + req.params.id);
console.log("req.query.id " + req.query.id);
Construct.find({}).exec(function(err,collection){
if (err){
console.log("Error - No Construct Retrieved");
}else
{
console.log("No Error - Construct Data Retrieved");
}
//console.log(collection);
res.send(collection);
})
};

exports.getConstructById = function(req,res) {
console.log("Get - constructs.getConstructById")
console.log("req.params._id " + req.params._id)
console.log("req.query._id " + req.query._id)
Construct.findOne({_id:req.params.id}).exec(function(err,construct){
if (err){
console.log("Error - No Construct Retrieved");
}else
{
console.log("No Error - Construct Data Retrieved");
}
res.send(construct);
})
};

Answer

I found my mistake. It is all within the Angular code. The call to the get that is made in the flCachedConstruct.js did not properly define the parameter to be passed. I needed to include the parameter name, "id" as well as the parameter value, constructID. The "id" in this function call matches what I called the parameter in flConstruct.js.

flConstruct.get({id: constructId }, function(data) {
Comments