Angular $http always returning null data from PHP API

Question

I am trying to use a login API that one of my developers created for me.

$http({
    method: 'POST',
    url: "http://example.com/api/userLogin",
    data: $.param(postLoginData),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    responseType: 'json'
}).then(function(loginData) {
    console.log(loginData);
});

My console.log() always logs the following:

Object {data: null, status: 200, config: Object, statusText: "OK"}

Yet when I go to the Network tab within developer tools, I can see that the response is actually the following:

I'm not a backend developer, so I was a little confused with this 0 at the beginning of the response. I then tried to investigate this further and looked into the PHP API code itself, and found that the response from curl_exec($loginCurl) that is returned is:

HTTP/1.1 100 Continue

HTTP/1.1 200 OK
Date: Mon, 09 May 2016 02:10:35 GMT
Server: Apache/2.4.7 (Ubuntu)
X-Powered-By: PHP/5.5.9-1ubuntu4.14
Cache-Control: no-cache
Content-Length: 43
Content-Type: application/json

{"id":"16","username":"user4","status":200}

The body of the response is valid JSON, so not too sure why Angular is returning null data, even though I can see the response in developer tools successfully...

EDIT:

My API contained the following to perform checks and create sessions:

$jsonResults = json_decode($body, true);
if($jsonResults != NULL || $jsonResults->id != NULL) {
    //Successfully logged in
    $_SESSION['user_name'] = $jsonResults->username;
    $_SESSION['user_login_status'] = 1;
    $_SESSION['user_id'] = $jsonResults->id;

    $this->response($body, 200);
}

Although, if the entire above code is just replaced with the following, it seems to work perfectly fine:

$this->response($body, 200);

Why would this be?

You can export a cURL command from the browser Network console (right-click on the Name -> Copy as cURL). Run that from your command line and see if the 0 shows up. The PHP script might be doing something based on user-agent or some other request header that your Angular app is sending — Phil
– Phil, Commented May 9, 2016 at 2:25

Phil · Accepted Answer · 2016-05-09 02:41:59Z

1

The problem is definitely server-side however you can work around it using a response transformer. For example...

$http.post('http://example.com/api/userLogin', $.param(postLoginData), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformResponse: function(data) {
        console.log('Raw data', data);
        if (angular.isString(data) && data[0] === '0') {
            data = data.substring(1);
        }
        return angular.fromJson(data);
    }
}).then(function(response) {
    console.log(response);
})

edited May 9, 2016 at 2:41

answered May 9, 2016 at 2:37

Phil

166k25 gold badges265 silver badges269 bronze badges

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

9 Comments

Fizzix Over a year ago

I definitely thought this would fix my problem, although data always seems to be null - postimg.org/image/swlxybl6p

Phil Over a year ago

Try adding some debugging to the transformer (see above)

Phil Over a year ago

@Fizzix did you try copying the cURL command from the browser?

Fizzix Over a year ago

Yes, while running as cURL in Terminal on my Mac, it has the 0 at the start of the response.

Fizzix Over a year ago

Found it. There was a hidden print_r(). All good! Thanks for your help Phil.

|

Collectives™ on Stack Overflow

Angular $http always returning null data from PHP API

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related