Query MongoDB with Mongoose within Angular App

Question

I have an app that needs to query my Mongo Database and return all items that match the specified criteria so they can be rendered to the DOM. I have tested the database with both postman and locally through my app, due to this I have determined that all information is being stored correctly. My problem is that I don't entirely know where the query should take place within my app.

The user will use a drop down to specify a type of business, once this is done all business that match this type should populate the DOM. Below is the code that I have so far:

This is the user controller:

angular.module('UserCtrl', [])

.controller('UserSelectController', function($scope, queryFactory) {
  //list out all of our specialty types of food in the below array -- this will populate in our dropdown selection for our user_BusDirectory.html view
  $scope.listOfTypes = ['Type 1', 'Type 2', 'Type 3', 'Type 4', 'Type 5', 'Type 6', 'Type 7', 'Type 8'];
  //invoke function to call a GET request to get business with that type of specialty
  $scope.getBusiness = function(){

  console.log('You selected: ', $scope.selectedType);
  queryFactory.queryType($scope.selectedType);

  };
});

The following resides in my factory:

angular.module('queryService', [])

.factory('queryFactory', function($http){

  var queryType = function(type){
    console.log('What is the type that has been passed in: ',type)
    var query = businesses.find({specialty: type}).exec(function(err, businessMatches){
      if(err){
        console.log(err);
        return res.send({ errorMessage : err})
      }else{
        res.json(businessMatches);
      }
    });
    console.log("Did query recieve all the types? :", query);
  }
  return {
    queryType: queryType
  }
});

Within my Mongo database businesses is the name of the collection that I would like to query. I keep getting ReferenceError: businesses is not defined when I try to test the function which leads me to believe that my approach is misguided.

Max Kroshka · Accepted Answer · 2016-04-30 17:21:00Z

1

I spent some time to give you and idea what you structure should look like. Your API handler on the server should look like this:

app.get('api/businesses', function(req, res) {
  Businesses.find({specialty: req.query.type})
  .then(function(businesses){
    res.json(businesses);
  })
  .catch(function(error){
    console.log("There was error retrieving businesses" + error);
  });
});

and on the Front End the factory that makes http call should look like:

angular.module('queryService', [])
.factory('queryFactory', function($http){
  var getBusinesses = function(type) {
    return $http({
      method: 'GET',
      url: 'api/businesses?type=' + type
    })
  };

  return {
    getBusinesses: getBusinesses
  }
});

and Controller has to do something with data after response comes back:

angular.module('UserCtrl', [])

.controller('UserSelectController', function($scope, queryFactory) {
  $scope.listOfTypes = ['Type 1', 'Type 2', 'Type 3', 'Type 4', 'Type 5', 'Type 6', 'Type 7', 'Type 8'];

  $scope.getBusiness = function(){
  queryFactory.getBusinesses($scope.selectedType)
    .then(function(response){
    // do something with response.data
    // put it on $scope.businesses
    });
  };
});

edited Apr 30, 2016 at 17:21

answered Apr 30, 2016 at 6:57

Max Kroshka

4972 silver badges5 bronze badges

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

6 Comments

DLF85 Over a year ago

Should my API handler have 'getCompanies'? I ask only because usually I only see an anonymous function there.

davidkonrad Over a year ago

When I read the question, I fail to see the relevance of companies, getCompanies etc, and the endpoint api/companies?type=' is dead wrong!

Max Kroshka Over a year ago

DLF85, You are right, it should be anon function there, I added route later and forgot to change that. I also renamed 'companies' to be 'businesses' to match your code.

DLF85 Over a year ago

Thanks! Now it is making more sense

DLF85 Over a year ago

@davidkonrad is it still wrong after the changes made? If not can you further explain your position?

|

Gene · Accepted Answer · 2016-04-30 06:24:27Z

0

'businesses' is undefined because it has not been assigned. Your code is missing any server calls to retrieve the data. You need:

A REST call to get the data
Suggest passing 'type' in the server call so the endpoint returns only the data needed.
queryType should return a promise ($q) that is resolved when the data is returned.

answered Apr 30, 2016 at 6:24

Gene

6164 silver badges8 bronze badges

2 Comments

DLF85 Over a year ago

I guess my misunderstanding comes from thinking that I could directly access my database. I have now just created a GET request to the server and made a conditional so that the only things returned are those that match the type. Somehow I feel like I did this the 'long' way and I'm not utilizing mongoose correctly. I am still having issues rendering the data that was sent back from my GET request.

Gene Over a year ago

It sounds like you are using Mongoose correctly. It simplifies the server side interaction with MongoDB. So to help us help you solve the problem - grab the json that is returned from an example and create an example of your rendering problem in plunker or codepen.

Collectives™ on Stack Overflow

Query MongoDB with Mongoose within Angular App

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related