Optional HTTP Post parameters JavaScript

You can just give an object in parameter instead of three string. Like this you can control the number of POST parameters instead of have some of them undefined.

EDIT : I suggest to do the filtering in your service. Like this, you don't have to complexify your code on each controller :

factory.getFilteredProjects = function(params){

  // remove empty value or empty array
  angular.forEach(params, function(value, key) {
    if( ! value || value.length === 0 ) {
      delete params[key];
    }
  })

  return $http.post('/user/test', params).
    success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available

        console.log("this is the response data " + data);
    }).
    error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

  };    
     return factory;
 });

getFilteredProjects({ region: 'test', sec: 'sector' })

so after doing some research, a few cups of coffee and couple of swear words later I got this working.

But heres a note:

First thanks to Yoann Prot your suggestion was a huge help!

This is my initial solution, I will NOT be accepting my own answer. Because there might be a better solution to this and I would like someone to post an answer/comment if they think it can be improved

So my if you read the comments above you know my API was able to handle multiple or flexible number parameters. The issue was my HTTP Post function required all parameters to be present.

As Alex Blex suggested in the comments that:

Then you just need to detect which ones the user actually interacted, and send only them

And thats exactly what I did.

I created a filter object to which I added key/value pairs of only the options that the user interacted with and passed that whole filter object as the parameter. This made my parameters for the HTTP Post request much more flexible.

Heres the code:

 var filterObj = {};

    var form = document.getElementById("regionPicker");
    var servicesForm = document.getElementById("servicesPicker");

    var inputs = form.getElementsByTagName("input");
    var arr = [];

    var servicesInput = servicesForm.getElementsByTagName("input");
    var servicesArr = [];

    for (var i = 0;  i < inputs.length; i += 1) {
         // Take only those inputs which are checkbox
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
                 arr.push(inputs[i].value);
         }
     }

    for (var i = 0;  i < servicesInput.length; i += 1) {
         // Take only those inputs which are checkbox
        if (servicesInput[i].type === "checkbox" && servicesInput[i].checked) {
                 servicesArr.push(servicesInput[i].value);
          }
       }


 // here arr contains an array of filter options selected by user
 filterObj.region = (arr.length > 0) ? arr:"";

 // here serviceArr contains an array of another filter options selected by user
 filterObj.sol = (servicesArr.length > 0) ? servicesArr:"";

And finally pass the filterObj as the parameter:

factory.getFilteredProjects = function(filterObj){

  return $http.post('/user/test',filterObj)
  .success(function(data, status, headers, config) {
       console.log("this is the response data " + data.length);
    })
  .error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
  }; 

So far all the tests have been successful. But I repeat if you know a better solution please let me know or if you think this solution has drawbacks or issues or is just bad practice please let me know.

Thanks!