How To: Pass node.js mongodb result to angularjs?

Question

So I have a MongoDB that I query using Node.js.

The data is not being sent out using this function and I dont know what is wrong

var findIco = function(db, callback) {
   var cursor =db.collection('footIco').find();
   cursor.each(function(err, doc) {
     // console.log(err);
      if (doc != null) {
        console.log(doc); <------ DISPLAY THE DATA IN THE CONSOLE
      } else {
         callback();
      }
   });
}; 
app.get('/icons', function(req, res){
  //calling the function
  MongoClient.connect(url, function(err, db) {
    if(err) {
      console.log(err);
      return res.status(500).send(err);
   }

    findIco(db, function(icons) {
         res.header("Access-Control-Allow-Origin", "*");
   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
  console.log(icons);<--------------- IS UNDEFINED
        res.json(icons);
        db.close();
        return;
    });
  });
});
app.listen(8080);

What am I doing wrong?

peteb · Accepted Answer · 2016-02-19 18:53:57Z

2

You would need to use some form of Web Server to create an API that will return this data when a request is received at a certain resource. You can make the requests to your API using the $http service in your Angular app. The most popular choice for a Node web framework is Express, this wraps the Node Core HTTP Module and gives a robust API.

Other Popular Node.js Web Frameworks

Koa
Hapi.js

These are just a couple of Node.js Web Frameworks, I also excluded any frameworks that are MVC based frameworks such as Meteor and Sails.js since Angular already is providing that piece.

To get up and running quickly in Express, you can use express-generator to scaffold out a basic Express API. Then just add a route for your function in your Node.js server.

findIco

var findIco = function(db, callback) { 
  db.collection('footIco').find().toArray(function(err, docs) {
    if (err) return callback(err, null);

    return callback(null, docs);
  }); 
}

Node.js API

app.get('/icons', function getIcons(req, res){
  //calling the function
  MongoClient.connect(url, function(err, db) {
    if(err) {
      console.log(err);
      return res.status(500).json(err);
   }

    findIco(db, function(err, icons) {
      if (err) 
        res.status(500).json(err);
      else {
        if (!icons)
          res.status(204).send();
        else
          res.json(icons);
      }
      db.close();
      return;
    });
  });
});

Angular $http call in footIconCtrl

app.controller('footIconCtrl', ['$scope', '$http', function($scope, $http){
  $scope.icons = [];

  $http({
    method: 'GET',
    url: 'http://<serverAddress>:<serverPort>/icons'
  })
    .then(function(icons) {
      $scope.icons = icons.data;
    })
    .catch(function(errRes) {
      // Handle errRess
    });
});

edited Feb 19, 2016 at 18:53

answered Feb 19, 2016 at 16:34

peteb

19.5k9 gold badges58 silver badges67 bronze badges

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

9 Comments

MadeInDreams Over a year ago

And how do i define $http?

peteb Over a year ago

You don't define it, its provided in the core Angular module. The way you access it from your controller is inject it into your dependencies on your controller like so: app.controller('footIconCtrl', ['$scope', '$http', function($scope, $http) {});

MadeInDreams Over a year ago

im getting this error XMLHttpRequest cannot load 127.0.0.1:8080/icons. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost' is therefore not allowed access.

peteb Over a year ago

Your Angular app needs to be served by your express app or they need to be on the same domain, ie, they both need to be from localhost.

peteb Over a year ago

See this post, the question and answer code samples should help you work through this.

|

SiddAjmera · Accepted Answer · 2016-02-19 17:11:34Z

1

In your angular code, you will have a file like getDocument.controller.js with a function with an http call to your service. Something like this :

var getDocs = function(){
    var apis = http://localhost:9000/api/getDocs;
    httpRequest.get(apis).
    then(function(docs){
        // Your code to handle the response
    });
};

Now in your server side code, you can send the response as

CollectionName.find({}, function (err, docs) {
    if (err) return next(err);
    if (!docs) return res.send(401);
    res.json(docs);
});

edited Feb 19, 2016 at 17:11

answered Feb 19, 2016 at 16:24

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

How To: Pass node.js mongodb result to angularjs?

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related