Get data from angular post method

Question

I have an angular controller with an http.post request but I'm not getting response, the service works fine because a test it using postman.

I need to display the data from the WS in an HTLM table(I know how to do this part) when the page is loaded, I'm sendinng the body for the request in a variable name "data", the header configuration un a variable name "config" and the the http.post call to the URL of my WS.

I'm new to angular so I don't know if I'm missing something, also I want to print the response in the console to test if it's returnig what I'm expecting.

I took this code from an example I found on the web and I modify it, in the example there's a button where the call to SendData() function but I don't need a button, the call has to be made as the page is loaded.

This is the controller code

.controller("HttpGetTestController", function ($scope, $http) {
    $scope.SendData = function () {
        var data = {
            "userId":"mdrodri",
            "token":"840430482834947828876768058086529370654",
            "domain":"MX",
            "filters":{
                "timeFrameType":"Week (FiscalYear)",
                "custMembSelectionType":"TOTAL",
                "locationSelectionType":"Country",
                "merchandiseSelectionType":"SBU",
                "startYear":"2015",
                "endYear":"2015",
                "startUnit":"1",
                "endUnit":"1",
                "comparator":false,
                "locationSelections":["CA"],
                "merchandiseSelections":["SBU38"],
                "custMembSelections":["TOTAL"],
                "metricSelections":["Product Sales (Category Rank)"],
                "rankOrder":"10"
            },
            "additionalFilters":[],
            "cache":false
        };

        var config = {
            headers : {
                'Content-Type': 'application/json;'
            }
        }

        $http.post('http://whateverurl/', data, config)
            .success(function (data, status, headers, config) {
                $scope.PostDataResponse = data;
                console.log("Success");
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    console.log("Data: " + data);
                    console.log("Status: " + status);
                    console.log("Headers: " + header);
                    console.log("Config: " + config);
            });

    };

})

In my HTML this is how I'm calling that controller

 <div class="panel panel-default" ng-controller="HttpGetTestController">

Thank's for the time and help.

Does http://whateverurl/ support CORS? If it doesn't you will not be able to call it from a different domain due to the same origin policy restriction that is built into browsers. Which explains why your request works when made from Postman but not using AJAX in a browser. Just look at the console of your browser and you will see the warning saying that the request has been blocked. — Darin Dimitrov
– Darin Dimitrov, Commented Dec 30, 2015 at 20:51
Server has to enable CORS headers, you have to add $httpProvider.defaults.useXDomain = true; — user5589903
– user5589903, Commented Dec 30, 2015 at 21:00
Actually I'm working on a local network and I check my console and there's nothing in there. :( — kennechu
– kennechu, Commented Dec 30, 2015 at 21:04
@AlbertCyberhulk And where shoul I add that $httpProvider thing? because I and my header type in the config variable. — kennechu
– kennechu, Commented Dec 30, 2015 at 21:06
Can you see the request being sent in the Network tab of your browser? — Darin Dimitrov
– Darin Dimitrov, Commented Dec 30, 2015 at 21:07

Ahmed Abdelraouf · Accepted Answer · 2015-12-30 22:23:16Z

1

You need to call $scope.SendData() function in the controller :

      .controller("HttpGetTestController", function ($scope, $http) {
        $scope.SendData = function () {
           //your code ...
         }
       //then the calling 
       $scope.SendData();//here
}

edited Dec 30, 2015 at 22:23

answered Dec 30, 2015 at 21:21

Ahmed Abdelraouf

1941 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kennechu Over a year ago

Hi @AhmedAbdelraouf I add that line but nothing happen... :(

Ahmed Abdelraouf Over a year ago

did you include the controller js file in the html file?

kennechu Over a year ago

Yes, actually I have another controller but that one is reading a json, I made this to test that angular was working good, then I create this controller to use the WS but nothing happen, I can realize that my code is right or not?

Ahmed Abdelraouf Over a year ago

try to add debugger; or a breakpoint at the beginning of the controller and inside the function and open the developer tool from your browser and refresh your html page if it hits in the controller this mean the html knows that the div block belongs to that angular controller

Ahmed Abdelraouf Over a year ago

it does not matter if its post or get just use your PostDataResponse so when the request succeed the object will be initialized and the the binding will work <tr ng-repeat="x in PostDataResponse "> <td>{{x.Name}}</td> <td>{{x.Country}}</td> </tr>

|

Collectives™ on Stack Overflow

Get data from angular post method

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related