AngularJS displaying MongoDB data

Question

I've a problem with the interact of AngularJS and MongoDb. I use NodeJS and ExpressJS on the server-side. With Mongoose I talk to Mongo. I've just done the routes.

index.js

      app.get('/api/dashboard', function (req, res) {

    Homepage
        .find({}, 'title -_id createdBy allbids.bid endTime')
        .exec(function (err, auctions) {
            if(err)
                res.send(err);
            console.log(auctions);
            res.json(auctions);
        })
});

The console display all the fields that i need.

Then I pass on the front-end. I use Angular route in this way:

       var app = angular.module('auction', [ 'ngRoute','HomeCtrl','NewAuctionCtrl', 'FollowingAuctionsCtrl', 'MyAuctionsCtrl']);


      app.config(function ($routeProvider, $locationProvider)
 {

 $routeProvider

.when('/', {
    templateUrl: 'views/partials/dashboard.html',
    controller: 'HomeController'
})



$locationProvider.html5Mode(true);


});

And my HomeController is this:

    angular.module('HomeCtrl', [])
  .controller('HomeController',function ($scope, $http) {
  $http.get('/api/dashboard').then(function(data) {
       console.log(data);
       $scope.auctions= data;

     })
  });

In the dashboard.html

         <div class="panel panel-default" ng-controller="HomeController">
<div class="panel-heading">All The Auctions</div>
<div class="panel-body">
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="auction in HomeController.auctions">
            {{auction}}
        </li>
    </ul>
</div>

It doesn't work. I need only to use {{auction.title}} instead of {{auction}}??

Change to be "auction in auctions". You shouldn't need to reference your controller as you're using $scope. Edit: then like you commented get the title like {{auction.title}}. — Mickers
– Mickers, Commented Mar 23, 2017 at 16:33

AJ Funk · Accepted Answer · 2017-03-24 00:41:30Z

2

Assuming your data is being successfully fetched from the server, you can do

<div class="panel panel-default" ng-controller="HomeController">
  <div class="panel-heading">All The Auctions</div>
    <div class="panel-body">
      <ul class="list-group">
        <li class="list-group-item" ng-repeat="auction in auctions">
          {{auction}}
        </li>
     </ul>
   </div>
 </div>

It doesn't need to be HomeController.auctions. This will put the entire auction object into that li, so depending on what you're trying to do you may want to do something like {{auction.title}} as you mentioned

answered Mar 24, 2017 at 0:41

AJ Funk

3,1971 gold badge18 silver badges18 bronze badges

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

2 Comments

mpeg90 Over a year ago

I did how you said but it doesn't work. With {{auction.title}} it shows me nothing, with {{auction}} it shows me an array with 5 elements, 1 are the data, all desplayed together, the others are status code, and functions that i don't know

AJ Funk Over a year ago

In your controller you probably need to do $scope.auctions = data.data; instead of just $scope.auctions = data;

AimeTPGM · Accepted Answer · 2017-03-24 03:30:16Z

Since you have declare to use HomeController in the outtest <div> that cover you heading and ui, li, that area will bind $scope in HomeController automactically.

So just use {{auction in auctions}}. If you have another $scope like $scope.foo = "foo" in HomeController, you can try <div>{{foo}}</div> inside the <div ng-controller="HomeController" to get the idea

I'm not sure if you want to separate the modules and inject it in to your auction module, that have .config() or if you just need HomeController to be one of controllers in action's module.

If your intention is the second one, I suggest to use var app = angular.module('auction',['ngRoute']).config( bla bla )

and in HomeController, use angular.module('auction').controller('HomeController',function ($scope, $http) { bla bla }) so you don't have to inject new controller everytime you create new controller

Hope it helps

Collectives™ on Stack Overflow

AngularJS displaying MongoDB data

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related