Angular SyntaxError: Unexpected token }

Question

I've spent a good hour trying to debug this but I have absolutely no idea why this would be wrong.

I've been trying to display a row of images onto a page using Angular based upon data retrieved from a json file. However, Angular keeps giving me this error:

SyntaxError: Unexpected token }
    at Object.parse (native)
    at fromJson (http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:1076:14)
    at defaultHttpResponseTransform (http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:8651:16)
    at http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:8736:12
    at forEach (http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:327:20)
    at transformData (http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:8735:3)
    at transformResponse (http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:9465:23)
    at processQueue (http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:13293:27)
    at http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:13309:27
    at Scope.$get.Scope.$eval (http://localhost:3000/assets/angular.self-5bf4e8cd0241c34665eca1c336b104c0716c32c68edd291d6ae5b0e0935d29ec.js?body=1:14548:28)

Here's my code

HTML:

<div id="officersPage" class="row" ng-app="officers" ng-controller="officerCtrl">
    <div id="officerModals" class="col-md-4" ng-repeat="officersOne in officersGroup">
        <div class="officerPics" ng-repeat="officer in officersOne">            
            <%= image_tag('logo.png', :id=>"{{officer.id}}", size: '140x140', :class=>"img-responsive, img-thumbnail") %>   

        </div>
    </div>
    <div id="moreDetails" class="col-md-4">
    </div>
</div>

Angular code:

# Contains the Angular code for the officer page -> will generate all the pictures and modals based on info through JSON file
app = angular.module('officers', [])

app.controller 'officerCtrl', [
    '$scope'
    '$http'
    ($scope, $http) ->
        $http.get('./officers.json').success (data) ->  
            console.log(data)
            $scope.officersGroup = data 
            console.log($scope.officersGroup)   
        return
]

Any help would be awesome!

Edit: Here's what a sample of the JSON file looks like:

{
  "officers": [
    {
        "name": "Matt Zhang",
        "role": "Webmaster",
        "class": "2018",        
        "id" : "matt"
    }
  ]
}

What is the content of that officers.json JSON file? Are you sure it's valid JSON? — doldt
– doldt, Commented Jun 25, 2015 at 6:57
You don't have officersOne defined, shouldn't it be ng-repeat="officer in officersGroup" — Mandeep
– Mandeep, Commented Jun 25, 2015 at 7:02
I suspect invalid JSON, and that the 'sample JSON' is different from the actual JSON with the syntax error in it. — sevenseacat
– sevenseacat, Commented Jun 25, 2015 at 7:12

nespapu · Accepted Answer · 2015-06-25 07:24:19Z

1

Just a guess, when you assign:

$scope.officersGroup = data

Shouldn't be?

$scope.officersGroup = data.officers

That is for the first iteration in your code. Then in the second iteration, are you using ng-repeat for iterate over the properties of an object? If it so, I do not think is the best way to do it.

<div class="officerPics" ng-repeat="officer in officersOne">

Cheers

edited Jun 25, 2015 at 7:24

answered Jun 25, 2015 at 7:15

nespapu

8128 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

Angular SyntaxError: Unexpected token }

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related