CODEWITHSUNDEEP
angularjsrest
koala
koala

Reputation: 1564

ngResource GET with filter values

I'm writing a small test application where I can retrieve my customers from a parse.com database.

I have the following form in html

...
<body ng-app="myApp">
    <div ng-controller="CustomerController">
        <button ng-click="getCustomers()">Get customers</button>
        <ul>
            <li ng-repeat="customer in customers">{{ customer.name }}</li>
        </ul>
    </div>
</body>
...

My angular app is the following:

Module

var app = angular
    .module('myApp', ['ngResource'])
    .constant('myConfig', {
        'api_url': 'https://api.parse.com/1/classes/',
        'parse_application_id': 'xxxxxxxxxxxxx',
        'parse_rest_api_key': 'xxxxxxxxxxxxx'   
});

Factory

app.factory('CustomersService', function($resource, myConfig) {
    return $resource(myConfig.api_url + 'Customer', {}, {
        query: { 
            method: 'GET', 
            isArray: false,
            headers: {
                'X-Parse-Application-Id': myConfig.parse_application_id,
                'X-Parse-REST-API-Key': myConfig.parse_rest_api_key
            }
        },
        create: { 
            method: 'POST',
            headers: {
                'X-Parse-Application-Id': myConfig.parse_application_id,
                'X-Parse-REST-API-Key': myConfig.parse_rest_api_key
            }
        }
    })
});

Controller:

app.controller('CustomerController', function($scope, CustomersService, CustomerService) {
     $scope.getCustomers = function() { 
         CustomersService.query().$promise.then(function(result) {  
            $scope.customers = result.results;
         });                 
     };
 });

So when I click my button, everything works like it should. But I also want to add a filter by name when I want to retrieve customers from the database. When I execute the following in Postman 

https://api.parse.com/1/classes/Customer?where={"name":"aaaaa"}

this works and only gets the customer with the name "aaaaa". So I know that the syntax is OK.

So I will add a textbox where the user can enter a customername and after that I want to click on the search button. But how can I manage the ?where={"name":"aaaaa"} into the angular stuff when I click the button? I also want to expand the filter with other columns from that customer.

Upvotes: 2

Views: 1268

Answers (1)

Phil
Phil

Reputation: 164760

Something like this should work (assuming everything goes in the where object)

Add some search fields that bind to a scoped object's properties. We'll call it search

<label for="search_name">Name</label>
<input type="text" ng-model="search.name" name="name" id="search_name">

<label for="search_city">City</label>
<input type="text" ng-model="search.city" name="city" id="search_city">

Then you can execute the query action with

CustomersService.query({where: $scope.search}).$promise...

That should create a query param like

?where=%7B%22name%22%3A%22aaaaa%22%2C%22city%22%3A%22London%22%7D

which is the URI encoded value

?where={"name":"aaaaa","city":"London"}

Upvotes: 1

Related Questions