Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Christiane Deneser
Christiane Deneser
4,303 Points

AngularJS Syntax error: unexpected token keeps occuring

I am currently following along the Video 'Using Services To Get Data' at the Angular Basics Cours. But I can't get along, because there is an error that constantly occurs. Can you please help me to see what is wrong. I am very frustrated already!!! And actually I can not finish this course as I don't know the solution... :(

Error Message: angular.js:12416 SyntaxError: Unexpected token / at Object.parse (native) at fromJson (http://localhost/angular/vendor/angular.js:1250:20) at defaultHttpResponseTransform (http://localhost/angular/vendor/angular.js:9371:28) at http://localhost/angular/vendor/angular.js:9462:20 at forEach (http://localhost/angular/vendor/angular.js:336:34) at transformData (http://localhost/angular/vendor/angular.js:9461:9) at transformResponse (http://localhost/angular/vendor/angular.js:10241:41) at processQueue (http://localhost/angular/vendor/angular.js:14634:42) at http://localhost/angular/vendor/angular.js:14650:35 at Scope.$eval (http://localhost/angular/vendor/angular.js:15916:44)

My HTML: <body ng-app="todoListApp"> 

<h1 ng-click="helloWorld()">My TODO List</h1>

<div ng-controller="mainCtrl" class="list">
    <div ng-class="{'editing-item': editing, 'edited': todo.edited}" 
            ng-repeat="todo in todos" class="item">

        <input ng-model="todo.completed" type="checkbox">
        <label ng-hide="editing" class="editing-label">{{todo.name}}</label>
        <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing"
                    ng-model="todo.name" class="editing-label" type="text">
        <div class="actions">
            <a href="" ng-click=" editing =! editing ">Edit</a> 
            <a href="" ng-click="helloConsole()">Save</a>
            <a href="" class="delete">Delete</a>
        </div>
    </div>
    {{todos}}
</div>

<script src="vendor/angular.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> </body>

My app.js looks like: angular.module('todoListApp', []) .controller('mainCtrl', function($scope, dataService) {

    $scope.learningNgChange = function() {
        console.log("An input changes");
    };

    $scope.helloWorld = dataService.helloWorld();

    dataService.getTodos(function (response) {
        console.log(response.data);
        $scope.todos = response.data;
    });

})
.service('dataService', function($http){

    this.helloWorld = function() {
        console.log('Hello Console Function');
    };

    this.getTodos = function(callback) {
        $http.get('mock/todos.json')
            .then(callback)
    }
});

My todos.json looks like: [ {"name":"Check out Botstrap"}, {"name":"Check out Foundation"}, {"name":"Check out Susy"}, {"name":"Check out Owl Caroussel"} ]

1 Answer

M Ashraful Alam
M Ashraful Alam
12,328 Points
M Ashraful Alam
M Ashraful Alam
12,328 Points

The error says your todos.json file has error, although your code runs fine on my side. Check the complete code below and your might compare with your complete code structure. Or post your complete index.html code here-

<html lang="en">

<head>
    <title></title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>

<body ng-app="todoListApp">
    <h1 ng-click="helloWorld()">My TODO List</h1>

<div ng-controller="mainCtrl" class="list">
    <div ng-class="{'editing-item': editing, 'edited': todo.edited}" 
            ng-repeat="todo in todos" class="item">

        <input ng-model="todo.completed" type="checkbox">
        <label ng-hide="editing" class="editing-label">{{todo.name}}</label>
        <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing"
                    ng-model="todo.name" class="editing-label" type="text">
        <div class="actions">
            <a href="" ng-click=" editing =! editing ">Edit</a> 
            <a href="" ng-click="helloConsole()">Save</a>
            <a href="" class="delete">Delete</a>
        </div>
    </div>
    {{todos}}
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" type="text/javascript"></script>
    <script>
        angular.module('todoListApp', []).controller('mainCtrl', function ($scope, dataService) {

                $scope.learningNgChange = function () {
                    console.log("An input changes");
                };

                $scope.helloWorld = dataService.helloWorld();

                dataService.getTodos(function (response) {
                    console.log(response.data);
                    $scope.todos = response.data;
                });

            })
            .service('dataService', function ($http) {

                this.helloWorld = function () {
                    console.log('Hello Console Function');
                };

                this.getTodos = function (callback) {
                    $http.get('mock/todos.json')
                        .then(callback)
                }
            });
    </script>

</body>

</html>

JSON File (todos.json)

[{
    "name": "Check out Botstrap"
}, {
    "name": "Check out Foundation"
}, {
    "name": "Check out Susy"
}, {
    "name": "Check out Owl Caroussel"
}]
Christiane Deneser
Christiane Deneser
4,303 Points

@M Ashraful Alam Thank you so much for your answear, but it still isn't working on my side. That is weared as I copyed your code. I will let you know when I found a solution.

M Ashraful Alam
M Ashraful Alam
12,328 Points

You might share a zip file for me to look at.