Accessing API with $http POST Content-Type application/x-www-form-urlencoded

Question

I am trying to access this REST API, which accepts three parameters: stationId, crusherId, monthYear I am doing it like this in Angula

Answer 1

When posting form data that is URL encoded, transform the request with the $httpParamSerializer service:

$http({
    headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
    url: 'https://fnrc.gov.ae/roayaservices/api/getHPData',
    method: 'POST',
    transformRequest: $httpParamSerializer,
    transformResponse: function (x) {
      return angular.fromJson(angular.fromJson(x));
    },
    data: {
      "stationId": 263,
      "crusherId": 27,
      "monthYear": '2016-04'
    }
}) 
  .then(function(response) {
    console.log(response);
    $scope.res = response.data;
    console.log($scope.res);
});

Normally the $http service automatically parses the results from a JSON encoded object but this API is returning a string that has been doubly serialized from an object. The transformResponse function fixes that problem.

The DEMO on PLNKR