current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 33 down vote favorite
19

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
3  
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
show 1 more comment

3 Answers

up vote 129 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.

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
4  
This is the definitely the correct answer. Saved me a ton of time and messy code. Thank you! –  urban_racoons Jun 5 '13 at 3:12
2  
mine is returning a different callback: angular.callbacks._0 how should i fix this? –  eaon21 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 at 20:04
    
This saved my day. Can't believe it hasn't been accepted as the best answer :( –  Mr_Pouet Mar 6 at 4:32
add comment
up vote 14 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
    
the good one here, tnx ! –  Pierre Broucz Jan 20 at 21:23
add comment
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 at 19:08
    
@DanieleBrugnara please see previous comments to this answer. –  Matt Ball Feb 4 at 23:31
show 1 more comment

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.