AngularJS getting response but in error with CakePHP

Question

I am trying to integrate angularjs with my already built app in CakePHP. When I tried to pull request from CakePHP using AngularJS I am getting response in error. Though if I hit same url I am getting valid json. I tried using addons in chrome also. But AngularJS takes it in error.

My Controller Code of AngularJS.

 var load = function () {
    console.log('call load()...');
    console.log($rootScope.appUrl + '/songs.json');
    $http.get($rootScope.appUrl + '/songs.json')
        .success(function (data, status, headers, config) {
        $scope.posts = data;
        alert("Here");
        alert(JSON.stringify($scope.posts));
        angular.copy($scope.posts, $scope.copy);
        })
        .error(function (data, status, headers, config) {

        alert("Error");
        console.log('DATA : ' + data);
        console.log('Status : ' + status);
        console.log('headers : ' + JSON.stringify(headers));
        console.log('config : ' + JSON.stringify(config));
        });
}
load();

How can I do exception handling to know what sort of error is ?
How can I check if their is no response from server or server is off?

My request headers are..

GET /demosite/songs.json HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:32.0) Gecko/20100101 Firefox/32.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Cookie: toolbarDisplay=hide
Connection: keep-alive

Response header are...

HTTP/1.1 200 OK
Date: Sat, 11 Oct 2014 03:48:34 GMT
Server: Apache/2.4.7 (Ubuntu)
X-Powered-By: PHP/5.5.9-1ubuntu4.4
Set-Cookie: CAKEPHP=i07rme235ifh66gjq9htdutg21; expires=Sun, 12-Oct-2014 03:48:34 GMT; Max-Age=86400; path=/; HttpOnly
Content-Length: 8717
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/json; charset=UTF-8

Please help.

When I check my request in XHR Console firebug its showing as OPTIONS instead of GET OR POST.

Warning of CORS - 'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at localhost/demosite/songs.json. This can be fixed by moving the resource to the same domain or enabling CORS. localhost/demosite/songs.json Line 0'; But I don't think thats the issue because I have implemented Angular using CORS but no changes I did particularly. — Sankalp
– Sankalp, Commented Oct 11, 2014 at 4:33
Do you run this app locally, as an HTML file or using localhost ?? — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Oct 11, 2014 at 4:36
seems like your trying achieve cros domain ? what is the $rootScope.appUrl value ? — Kalhan
– Kalhan, Commented Oct 11, 2014 at 4:37

Kalhan · Accepted Answer · 2014-10-11 04:56:30Z

1

var url = $rootScope.appUrl+"/songs.json"+"?callback=JSON_CALLBACK";
$http.jsonp(url)
    .success(function(data){
        console.log("success");
    })
    .error(function(data){
        console.log("error");
    });

If u need to achieve cros domain please try this one :)

$http#jsonp

edited Oct 11, 2014 at 4:56

answered Oct 11, 2014 at 4:50

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

2 Comments

Sankalp Over a year ago

Its just help to pull out data. not to send data as well.

Sankalp Over a year ago

But if I wish to in my next call, in future. JSONP won't help me to achieve that.

Manish Kr. Shukla · Accepted Answer · 2014-10-11 04:24:35Z

0

A more better way of doing ajax Calls is using Promise API in AngularJS.

For e.g. :

  $scope.makeAjaxCall = function(url, data, successCallback) {

      var promise = $http(request);

      promise.success(function(data, status, header, config) {
              successCallback(data);
      });

      promise.error(function(data, status, header, config) {
          if (status === 404) {

          } else if (status === 406) {

          } else if (status === 408) {

          } else {


            // you can check for other statuses such as 500 

          }

      });
  };

This way you'll be having more details about the status of the HTTP call and also the error message.

answered Oct 11, 2014 at 4:24

Manish Kr. Shukla

4,4771 gold badge22 silver badges35 bronze badges

1 Comment

Sankalp Over a year ago

Can you please explain bit more? I have read about promises but never implemented. I don't find much changes in our code. You have assigned it to promise variable thn doing same what I am using success and error callback.

Collectives™ on Stack Overflow

AngularJS getting response but in error with CakePHP

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related