CODEWITHSUNDEEP
angularjs
Tan Rezaei
Tan Rezaei

Reputation: 2137

Uncaught SyntaxError: Unexpected token : in AngularJS

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

Upvotes: 5

Views: 31567

Answers (3)

Wilt
Wilt

Reputation: 44336

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>

Upvotes: 0

daron_
daron_

Reputation: 31

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

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

Upvotes: 3

zs2020
zs2020

Reputation: 54514

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});

Upvotes: 3

Related Questions