Yummly API " Uncaught SyntaxError: Unexpected token : "

Question

I am trying to request data from the Yummly API with the following call

       $http.jsonp('http://api.yummly.com/v1/api/recipes?_app_id=' 
          +  $scope.apiId 
          + '&_app_key=' 
          + $scope.apiKey 
          + '&allowedAllergy[]=396^Dairy-Free' 
          + '/?callback=JSON_CALLBACK' ).success(function(data) {
                    console.log(data);
          }).error(function(error) {

        });

And I keep getting this error saying " Uncaught SyntaxError: Unexpected token : " and when I click it takes me to the response. It is also not logging the data in the console.

Answer 1

The sever is returning JSON - not JSONP. This in turns causes the exception when the JSON text is executed in the hosting <script> context.

Running the following code in the console will generate the same error because {..} is in a Statement context:

{"foo": "bar"}

On the other hand, a valid JSONP response should look like this (which is valid syntax because {..} is in an Expression context):

JSON_CALLBACK({"foo": "bar"})