cant access JSON response in callback AngularJS

Question

In my net tab I am seeing the responses coming back but I can't get access to the data for some reason.

Here is the direct link: https://github.com/users/gigablox/contributions_calendar_data

Using Angular 1.2 rc2. Tried a couple different ways...

$http

var url = "https://github.com/users/gigablox/contributions_calendar_data?callback=JSON_CALLBACK";
$http.jsonp(url).success(function(data){
    console.log(data);
});

$resource

var handle = $resource('https://github.com/users/gigablox/contributions_calendar_data',{},{
  get:{
    method:'JSONP',
    isArray: false, //response is wrapped as an array. tried true and false
    params:{callback:'JSON_CALLBACK'}
  }
});

handle.get().$promise.then(
function(data){
    console.log(data);
}).
function(error){
    console.log(error); //undefined but 200 OK on response?
});

Use debugging.. put a breakpoint on the success line in both cases and look at the variables to see what they hold. Then tells us what you see — pfrank
– pfrank, Commented Sep 15, 2013 at 1:47
@Jason In the $resource error callback it's returning the data property as undefined... But the response in my net tab is 200 OK. What is strange is the angular.callbacks._0() function isn't wrapping the response. The response type is an array as you will see in that direct link, so I've tried falgging isArray:true. No dice. — Dan Kanze
– Dan Kanze, Commented Sep 15, 2013 at 1:56

Jason · Accepted Answer · 2013-09-15 02:32:07Z

The problem here is that you are requesting a flat file, so the server isn't wrapping the data in the javascript function call specified by the jsonp_callback querystring parameter. Further CORS is preventing you from fetching the file directly using $http/xhr.

In general, if you use $http.jsonp the specified callback function needs to reside in the global scope, and then you need to 're-angularify' the response data.

Here's an example using the wordpress api: http://jsfiddle.net/Rjfre/23/

HTML

<div ng-controller="MyCtrl" id='ctl'>
  <h2 ng-show="data">Data from callback</h2>
  <pre>{{data}}</pre>

  <h2 ng-show="success">Success</h2>
  <pre>{{success}}</pre>

  <h2 ng-hide="data">Error</h2>
  <pre>{{error}}</pre>
</div>

SCRIPT

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $http) {
    $scope.name = 'Superhero';
var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url).then(
        function(s) { $scope.success = JSON.stringify(s); }, 
        function(e) { $scope.error = JSON.stringify(e); } );
}

function jsonp_callback(data) {
    var el = document.getElementById('ctl');
    var scope = angular.element(el).scope();
    scope.$apply(function() {
        scope.data = JSON.stringify(data);
    });
}

Thank you Jason for your response. I have forked your fiddle and swapped out the wordpress URL out for my own but am still running into the same issue: jsfiddle.net/NUaxn
yes, as I said, you can't use the data from that github page. it's a flat page, it won't get wrapped in a javascript callback.
Oh I see. So this is impossible to do in the confines of the framework?
This is a github thing, github is returning the file with a content-type of application/json, but it's not wrapping the returned data in a function call. Here is more information about JSONP: en.wikipedia.org/wiki/JSONP
I see, their servers arent supporting JSONP or CORS for that particular resource. Thank you!

Collectives™ on Stack Overflow

cant access JSON response in callback AngularJS

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related