Accessing API with $http POST Content-Type application/x-www-form-urlencoded always gets 'false' results

Question

I have the following REST Service which I have to access on POST Method, I can access it via jQuery but I don't know how to do it with AngularJS (v1)

<string xmlns = "http://schemas.microsoft.com/2003/10/Serialization/">
    <script id = "tinyhippos-injected" /> 
      {
        "volumeResult": {
            "gyydt": "9771241.17704773",
            "gytotal": "29864436.1770477",
            "gybudgeted": "29864436.1770477",
            "lyydt": "10197350",
            "lytotal": "27859381",
            "lybudgeted": "10197350",
            "cyytd": "6992208",
            "lastUpdate": "March-2017"
        },
        "valueResult": {
            "gyydt": "26862094",
            "gytotal": "68217952",
            "gybudgeted": "68232952",
            "lyydt": "0",
            "lytotal": "0",
            "lybudgeted": "0",
            "cyytd": "68217952",
            "lastUpdate": "March-2017"
        },
        "trucksResult": {
            "gyydt": "165951",
            "gytotal": "497879",
            "gybudgeted": "497879",
            "lyydt": "168822",
            "lytotal": "468814",
            "lybudgeted": "168822",
            "cyytd": "119442",
            "lastUpdate": "March-2017"
        }
    } 
</string>

Here is my controller.js:

angular.module('starter.controllers', [])
.controller('DashCtrl', ['$scope', '$http', function ($scope, $http) {

    $http({
        //headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},
        headers: {'Content-Type' : 'application/json'},
        url: 'https://myurl../api/getHPData',
        method: 'POST',
        // data: data, 
        params: {
            "stationId": 263, 
            "crusherId": 27, 
            "monthYear": '2016-04'
        }
    })
    .then(function (response) {
                console.log(response);
     })
// I don't have to use .success and .error function as they are [depricated][2]

//.success(function (data, status, headers, config) {

//      $scope.greeting = data;
//      var Result = JSON.stringify(data);
//      var Result = JSON.parse(data);
//})
//.error(function (error, status, headers, config) {
//  console.log("====================== Error Status is: " + error);
//  console.log("====================== Status is: " + status);
//  console.log("====================== Error occured");
//})
}]) // eof controller DashCtrl

.controller('MapsCtrl', function($scope) {})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

What I want is value of: "volumeResult" > "gytotal"

Problems:

1. It always return:

Object {data: "{"result":"false"}", status: 200, config: Object, statusText: "OK", headers: function}

and

2. When I pass monthYear without quotes it process (arithmetic) it as (2016-04 = 2012)

3. As the service is POST but when I analyze it in Chrome Developers Tool so I get: (Query String, which isn't meant to be POST)

ionic.bundle.js:25005 XHR finished loading: POST "https://myurl../api/getHPData?crusherId=27&monthYear=2016-4&stationId=263"

Possible solutions: Either I am using wrong header:

headers: {
         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
         'Accept':       'application/json'
         },

Or header may be,

headers: {
        'Content-Type': 'application/json', 
        'Accept':       'application/json'
        },

Or as per my friend says:

When I change your code to use the code above, I get this error: "{"Message":"The requested resource does not support http method 'OPTIONS'."}" Which means that there is a CORS (Cross-origin Resource Sharing) issue. Chrome is trying to make a "preflight" request to allow CORS, but the server doesn't know what to do with it.

But I don't think it is because of this as I am receiving:

Object {data: "{"result":"false"}", status: 200, config: Object, statusText: "OK", headers: function}

from server. Noted that: {"result":"false"} is the message displayed by the server when it didn't find data or you pass wrong parametes. Also bellow jQuery code is proof that I can access the server. :)

Edit

jQuery Snippet:

<script>
$(document).ready(function() {
        get_homepage_data(263, 27, '2016-04');

        function get_homepage_data(stationIds, crusherIds, date) {
            var url = "https://myurl..";
            var data_to_send = {
                'stationId': stationIds, 
                'crusherId': crusherIds,
                'monthYear': date
            };

            console.log("Value is: " + JSON.stringify(data_to_send));
            //change sender name with account holder name
            //        console.log(data_to_send)
            $.ajax({
                url: url,
                method:   'post',
                dataType: 'json',
                //contentType: 'application/json',
                data: data_to_send,
                processData: true,
                // crossDomain: true,
                beforeSend: function () {
                }
                , complete: function () {}
                , success: function (result1) {

                    // I know I can do it in one line but lazy enough to edit it here :p 
                    var Result = JSON.parse(result1);
                    var value_data = Result["valueResult"];
                    var foo = value_data["gyydt"];

                    console.log("Log of foo is: " + foo);

                    var foo2 = 0;
                    // 10 lac is one million.
                    foo2 = foo / 1000000 + ' million';

                    console.log(JSON.stringify(value_data["gyydt"]) + " in million is: " + foo2);
                }
                , error: function (request, error) {
                    return false;
                }
            });
        }   
    }); // eof Document. Ready  
</script>

Output of above script is script is:

Value is: {"stationId":263,"crusherId":27,"monthYear":"2016-04"} XHR finished loading: POST "https://myurl../api/getHPData". Log of foo is: 26862094 "26862094" in million is: 26.862094 million Which is indeed perfect. :)

Answer 1

try to use $http this way ..

$http.post("https://myurl../..",JSON.stringify({
            stationId: 263, 
            crusherId: 27, 
            monthYear:'2016-04'
        })).then(function(res){

          console.log(res);

        }).catch(function(errors){
          console.log(errors);
})

Answer 2

I got answer. Whao.

Thank you georgeawg for his answer:

He says:

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://myurl..',
    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.

Now I am able to get value of gytotal as:

    var myData = parseFloat(response.data.valueResult.gytotal);
    console.log(myData);