CODEWITHSUNDEEP
angularjsnode.jsmongodbmongoose
mpeg90
mpeg90

Reputation: 167

Filtering MongoDB data on the front end

I have little problems with MongoDb. I have 2 collections: Auctions and Users. In the "Users" i store obviously the users (mail, name...etc) In the Auctions i store products (creationdate, createdBy, FollowedBy, Invitations, image). Now, i want to show in every user's dashboard, only the products that he follows (his name is stored in the ""FOllowedBy" when he clicks on the botton Follow). If I have to filter on the backend, all it's clear, instead i want to load all the data from the DB and then filter that on the front end with angularJs.

With a simple field like createdBy it's easy: If i Have an user called "Alex"(for example) i can show the data only if createdBy match with Alex (or every other user). But the same thing doesn't work with an array field like "FollowedBy". If in the product "Table" createdby: "Mark", FollowedBy: "Alex" and "Jack", i can easy filter all the product to show only Mark's product, but i don't understand how to show only the products followed by Alex, cause this field is an array.

This is my back-end route.

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

    AllAuctions
        .find({}, function (err, auctions) {
            if (err)
                res.send(err);
            console.log(auctions);
            res.send(auctions);

        });
});

I load it with $http with angularJs:

         $http.get('/api/dashboard').then(function (AllAuctions) {
           $scope.allauctions = AllAuctions.data;

       });

If i have to filter the field "createdBy" i can do something like this:

           <div class="panel panel-default" >
    <div class="panel-heading">My Auctions</div>
    <div class="panel-body">
        <ul class="list-group" ng-repeat="allauction in allauctions">
            <li class="list-group-item" ng-show="allauction.createdBy=='Alex'">
                    <img ng-src="{{allauction.imgUrl}}">
                    <div class="title"> {{allauction.title}} </div>

</li>
</ul>
</div>
</div>

But i don't understand how to filter a field like this:

                 FollowedBy: [
                      Shelly.name,
                      Dario.name
                 ]

to show only the products followed by Dario.

Upvotes: 1

Views: 1770

Answers (1)

Dmitry
Dmitry

Reputation: 2052

If you want to do it in html you can do something like

ng-show="allauction.FollowedBy.indexOf('Alex')>=0"

However when you have multiple filters it will quickly become hardcore. You should define a filtering function in javascript that will compute a filtered array on which you can do a simple ng-repeat. Or you could alternatively add a flag to your allauction objects and perform ng-if/ng-show based on this flag. For exemple:

function updateFilteredData()
{
    $scope.filteredData = [];
    for(var i = 0; i< $scope.allauction; i++)
    {
         var auction = $scope.allauction[i];
         if(auction.createdBy !== currentUser.name) //I assume currentUser is json object for your Alex user
             continue;
         if($scope.followByFilter && auction.FollowedBy.indexOf($scope.followByFilter) < 0)
              continue; //I assume followByFilter is a string containing the name of a follower you are trying to filter

         $scope.filteredData.push(auction);
    }

}

You need to call this function once in $http get and each time filtering conditions change (ex: followByFilter name changes...). Ofcorse you should ng-repeat on filteredData array instead of allauction.

Upvotes: 1

Related Questions