Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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"
}]

@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.