current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 99 down vote favorite
48

I am using angular's $http.jsonp() request which is successfully returning json wrapped in a function:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url).
    success(function(data, status, headers, config) {
        //what do I do here?
    }).
    error(function(data, status, headers, config) {
        $scope.error = true;
    });

The problem is, I don't know how to access/parse the returned function-wrapped-JSON. Any guidance is much appreciated. Thanks!

share|improve this question
4  
With JSONP you don't "access/parse the returned function-wrapped-JSON." Your callback is called; it receives the JSON data as an argument. – Matt Ball Aug 22 '12 at 3:39
    
I've tried doing something like – akronymn Aug 22 '12 at 13:59
    
(sorry hit enter too soon above) At what point is my callback called? A code snippet would be really helpful. I've tried a number of different things at this point and am stumped. – akronymn Aug 22 '12 at 14:21
    
The callback is called when the response comes back. Do you have a function named jsonp_callback? If not, there's your problem. – Matt Ball Aug 22 '12 at 14:24
    
for now I've written a simple function to just return the first element of the json, function jsonp_callback(data) { return data.found; //should be 3 } – akronymn Aug 22 '12 at 14:32
up vote 267 down vote accepted

All you should have to do is change callback=jsonp_callback to callback=JSON_CALLBACK like so:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

And then your .success function should fire like you have it if the return was successful.

Doing it this way keeps you from having to dirty up the global space. This is documented in the AngularJS documentation here.

Updated Matt Ball's fiddle to use this method: http://jsfiddle.net/subhaze/a4Rc2/114/

Full example:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

$http.jsonp(url)
    .success(function(data){
        console.log(data.found);
    });
share|improve this answer
7  
This is the definitely the correct answer. Saved me a ton of time and messy code. Thank you! – urban_raccoons Jun 5 '13 at 3:12
5  
mine is returning a different callback: angular.callbacks._0 how should i fix this? – Roj Beraña Jul 13 '13 at 5:09
    
@eaon21 do you have a fiddle example? – subhaze Jul 14 '13 at 2:50
2  
@eaon21 it's the desired behavior, angular substitutes JSON_CALLBACK to a dynamicly generated one, you don't have to pay attention to it – Guillaume86 Feb 13 '14 at 20:04
    
This saved my day. Can't believe it hasn't been accepted as the best answer :( – Mr_Pouet Mar 6 '14 at 4:32
up vote 64 down vote

The MOST IMPORTANT THING I didn't understand for quite awhile is that the request MUST contain "callback=JSON_CALLBACK", because AngularJS modifies the request url, substituting a unique identifier for "JSON_CALLBACK". The server response must use the value of the 'callback' parameter instead of hard coding "JSON_CALLBACK":

JSON_CALLBACK(json_response);  // wrong!

Since I was writing my own PHP server script, I thought I knew what function name it wanted and didn't need to pass "callback=JSON_CALLBACK" in the request. Big mistake!

AngularJS replaces "JSON_CALLBACK" in the request with a unique function name (like "callback=angular.callbacks._0"), and the server response must return that value:

angular.callbacks._0(json_response);
share|improve this answer
4  
the good one here, tnx ! – Pierre Broucz Jan 20 '14 at 21:23
    
Is there any way we can change the name of the callback so that it works with hard-coded static json file. – Pavel Nikolov Jul 6 '15 at 12:50
1  
This should be best answer ! – user6186801 Apr 12 at 14:27
up vote 6 down vote

This was very helpful. Angular doesn't work exactly like JQuery. It has its own jsonp() method, which indeed requires "&callback=JSON_CALLBACK" at the end of the query string. Here's an example:

var librivoxSearch = angular.module('librivoxSearch', []);
librivoxSearch.controller('librivoxSearchController', function ($scope, $http) {
    $http.jsonp('http://librivox.org/api/feed/audiobooks/author/Melville?format=jsonp&callback=JSON_CALLBACK').success(function (data) {
        $scope.data = data;
    });
});

Then display or manipulate {{ data }} in your Angular template.

share|improve this answer
up vote 4 down vote

This should work just fine for you, so long as the function jsonp_callback is visible in the global scope:

function jsonp_callback(data) {
    // returning from async callbacks is (generally) meaningless
    console.log(data.found);
}

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url);

Full demo: http://jsfiddle.net/mattball/a4Rc2/ (disclaimer: I've never written any AngularJS code before)

share|improve this answer
    
That did it! It turns out the scope that I was messing up. Thank you! – akronymn Aug 22 '12 at 16:31
1  
This answer was not very helpful. It doesn't follow the scope of AngularJS. – xil3 May 27 '13 at 19:17
1  
@xil3 thanks for the feedback; unfortunately only the OP (akronymn) can switch the accepted answer, not me. – Matt Ball May 27 '13 at 19:47
    
This is wrong.. – Daniele Brugnara Feb 4 '14 at 19:08
    
@DanieleBrugnara please see previous comments to this answer. – Matt Ball Feb 4 '14 at 23:31
up vote 3 down vote

In order to set jsonp callback JSON_CALLBACK in conjunction with params in the config, you can do this:

params = {
  'a': b,
  'token_auth': TOKEN,
  'callback': 'JSON_CALLBACK'
};

$http({
  url: url,
  method: 'JSONP',
  params: params
})
share|improve this answer
up vote 2 down vote

For parsing do this-

   $http.jsonp(url).
    success(function(data, status, headers, config) {
    //what do I do here?
     $scope.data=data;
}).

Or you can use `$scope.data=JSON.Stringify(data);

In Angular template you can use it as

{{data}}
share|improve this answer
up vote 0 down vote

for me the above solutions worked only once i added "format=jsonp" to the request parameters.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.