How to send multiple SQL query parameters in Web API GET request in AngularJS?

Question

I am building an app for reporting of stock and sales summary of a hospital, and there are 19 parameters to pass in GET request of API as to show values after searching in SQL table.

I can pass 2 parameters in URL and it works, but passing 20 parameters in URL is hectic and unmanageable.

How can I send such SQL query parameters in GET request from AngularJS?

I tried passing all parameters in URL on Postman App and it works but I want to pass it as a object or such:

var stockSalesSummaryPayload = {
    init: '2010/01/10',
    final: '2019/01/01',
    c_price: '0',
    XCHNGRT: '0.0',
    status: '0.0',
    firm: '0',
    userid: '0',
    all_firm: '0',
    bulk_stk: true,
    edited: true,
    super: '0',
    store: '0',
    grpid: '0',
    compcode: '0',
    ac_code: '0',
    zero: true,
    sales: true,
    bulksystem: '0',
    div_id: '0'
};

vm.fetchStockSalesSummaryList = function () {

    // CODE WORKING
    $http.get('http://192.168.50.112/medipro.api.Medipro/api/stocksalessummary?init=2015/01/10&final=2019/01/10&c_price=0&XCHNGRT=0.0&status=0.0&firm=0&userid=0&all_firm=0&bulk_stk=true&edited=true&super=0&store=0&grpid=0&compcode=0&ac_code=0&zero=true&sales=true&bulksystem=0&div_id=0')

    // CODE NOT WORKING
    $http.get('http://192.168.50.112/medipro.api.Medipro/api/stocksalessummary', stockSalesSummaryPayload)
        .then(function (result) {
            vm.stockSalesSummaryList = result.data;
            console.log(result.data);
        }, function (error) {
            console.log(error);
            vm.notification = { mode: 'danger', message: 'Error: ' + error.data.message };
        });
}

I expect my output to come as per my query parameters.

The page looks like this:

Answer 1

To automatically encode URL parameters, use the params property of the config object:

var stockSalesSummaryPayload = {
    init: '2010/01/10',
    final: '2019/01/01',
    c_price: '0',
    XCHNGRT: '0.0',
    status: '0.0',
    firm: '0',
    userid: '0',
    all_firm: '0',
    bulk_stk: true,
    edited: true,
    super: '0',
    store: '0',
    grpid: '0',
    compcode: '0',
    ac_code: '0',
    zero: true,
    sales: true,
    bulksystem: '0',
    div_id: '0'
};

var url = "http://192.168.50.112/medipro.api.Medipro/api/stocksalessummary";
var config = { params: stockSalesSummaryPayload };

$http.get(url, config)
.then(function (result) {
    vm.stockSalesSummaryList = result.data;
    console.log(result.data);
}, function (error) {
    console.log(error);
    vm.notification = { mode: 'danger', message: 'Error: ' + error.data.message };
});

The AngularJS framework will automatically add the search parameters to the URL with reserved characters properly percent encoded.