Angular JSON vs JSONP $promise

Question

if i make this JSON call from my controller.js:

$scope.userInvestors = userInvestors.query({UserID:$scope.user.uid}, 
  function(userInvestors) {
    console.log("yep yer here");
}

with this $resource:

factory('userInvestors', function($resource){
  return $resource('http://wherevertheserveris/Rest/userInvestors.php', {}, {
    query: {method:'GET', params:{}, isArray:true}
  });
})

then the console is updated as expected with: yep yer here

however if I change the request to a JSONP request:

$scope.userInvestors = userInvestors.query({UserID:$scope.user.uid, 
  callback: 'JSON_CALLBACK'}, function(userInvestors) {
    console.log("but are you here?");
}

and the resource:

factory('userInvestors', function($resource){
  return $resource('http://wherevertheserveris/Rest/userInvestors.php', {}, {
    query: {method:'JSONP', params:{}, isArray:true}

  });
})

nothing is printed to the console even though I know the call was completed and the data retrieved?

how do I get my JSONP log statement to print?

ANSWER:

thanks to both answers below: I needed to properly format the return response from the API.

In the case of NULL I was returning via PHP: print $callback."null";

What I needed to return was just an empty array inside a function wrapper, or whatever other properly formatted JSONP response you find appropriate. In my case it was: print $callback."([])";

make sure API is returning jsonp and not json that isn't CORS enabled. If just json, can see response body but browser can't use it from different domain — charlietfl
– charlietfl, Commented Nov 26, 2013 at 3:36

Chickenrice · Accepted Answer · 2013-11-26 06:31:44Z

First of all you need to make sure that what data format is returning from back-end. JSONP response is a JSON data with a function call wrapped around it.

My php API implementation:

<?php
    $callback = isset($_GET['callback'])?$_GET['callback']:'JSON_CALLBACK';

    $array = array("name"=>"test","email"=>"[email protected]");

    echo $callback."(".json_encode($array).")";
?>

Because the wrapped function call name is determined by the param 'callback', remember to assign proper name to callback param and custom method property 'callback' when you're using ngResource module.

Angular implementation:

angular.module("app",['ngResource'])
.controller("myCtrl",function($scope,userInvertors){
    $scope.jsonpTest = function(){
        $scope.result = userInvertors.query(function(response){
            console.log(response);
        });
    }
})
.factory("userInvertors",function($resource){
    return $resource('http://your.domain.com/API/getUser/123',{},{
        query:{
            method:'JSONP',
            params:{callback:"JSON_CALLBACK"},
            callback:"JSON_CALLBACK"
        }
    });
});

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ngResource</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.js"></script>
        <script src="js/ngResource.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="myCtrl">
        <input type="button" ng-click="jsonpTest()" value="JSONP"/>
    </div>
</body>
</html>

Screen shot:

API:

enter image description here

Get response: enter image description here

Hope this is helpful for you.

I had everything correct with the exception of No results being returned in which case I implemented the following PHP: print $callback."([])";

Alexey · Accepted Answer · 2013-11-26 07:57:39Z

1

You should do 2 things:
1. In your JSONP userInvestors service spesify callback parameter with value of 'JSON_CALLBACK';
2. In your userInvestors.php script get callbackrequest variable and use it's value for reply preparation:

PHP CODE:

$callback = $_GET['callback'];
$jsonStr = "...";
header("Content-type: text/javascript");

echo $callback."(".jsonStr.")";

answered Nov 26, 2013 at 7:57

Alexey

1,3307 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular JSON vs JSONP $promise

ANSWER:

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

ANSWER:

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related