Uncaught SyntaxError: Unexpected token : in AngularJS

Question

I've been working on this for a few hours and can't seem to get anywhere. I hope this is the right place to post this. I'm new to StackOverflow so please guide me to the right place if this isn't correct.

I have the following html file:

<!DOCTYPE HTML>
<html ng-app="DishClips">
 <head>
    <script type="text/javascript" src="http://code.angularjs.org/angular-1.0.0.0rc4.min.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/angular-resource-1.0.0.0rc4.min.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
    <script type="text/javascript" src="./dishclips.js"></script>
 </head>

 <body>
 <div ng-controller="DishClipsCtrl">
    <table class="table table-striped">
        <tr ng-repeat="restaurant in dishclipsResult.results"></tr>
            <td>{{restaurant.name}}</td>
    </table>
 </div>
 </body>
</html>

And the following in my dishclips.js:

angular.module('DishClips', ['ngResource']);

function DishClipsCtrl($scope, $resource) {
    $scope.dishclips = $resource('http://apiv2.dishclips.com/dishclips/api/:action',
    {action:'searchRestaurants',address:'irvine',callback:'JSON_CALLBACK' },
    {get:{method:'JSONP'}});

    $scope.dishclipsResult = $scope.dishclips.get(); 
}

When I run this (in chrome) I get:

Uncaught SyntaxError: Unexpected token :

The json return looks great so I don't understand why this is an issue.

Thanks

use the development version of angular instead of the minified version and then tell your browser to break before exception. The stack trace might have useful information. — Nathaniel Johnson
– Nathaniel Johnson, Commented Sep 30, 2013 at 23:07

zs2020 · Accepted Answer · 2013-09-30 23:09:14Z

3

Because the API you used returns JSON instead of JSONP. The JSONP's payload should be wrapped with a function like this functionCall({"Name": "Foo", "Id": 1234, "Rank": 7});

answered Sep 30, 2013 at 23:09

zs2020

54.6k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ksimons Over a year ago

Was just typing out this exact answer but you beat me to it.

Tan Rezaei Over a year ago

I'm not sure exactly what this means? What part of the code do I need to wrap in the fanctionCall?

Tan Rezaei Over a year ago

@sza can you help me figure out where this function needs to go? I am not sure I understand the hint on how to fix this. thank you

ksimons Over a year ago

The server-side API needs to wrap the JSON result in a function call, that's how JSONP works. Since I'm guessing you don't have control over this API, your best bet is to create an API on the server which serves your web content. This API should just forward requests to the other API. This will circumvent the same-origin issues.

daron_ · Accepted Answer · 2014-08-01 13:36:36Z

3

You must define one more default param in the JSONP request.

get:{method:'JSONP', params : {callback : 'JSON_CALLBACK'}}

answered Aug 1, 2014 at 13:36

daron_

313 bronze badges

Comments

Wilt · Accepted Answer · 2017-03-28 12:28:11Z

0

You also get this error if accidentally load the template page (instead or on top of the directive .js file) as a script.

<script src="/js/Directives/Templates/myTemplate.html"></script>

answered Mar 28, 2017 at 12:28

Wilt

44.9k15 gold badges163 silver badges216 bronze badges

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected token : in AngularJS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related