Manikandan S Manikandan S - 1 month ago 8
AngularJS Question

AngularJS $http get service 'SyntaxError: Unexpected token }' issue

I'm learning AngularJS. So I'm going through the AngularJS tutorials on here - https://docs.angularjs.org/tutorial/step_07. While I'm in step 7 I'm facing syntax error while using angularjs $http service. This is my application directory structure and files.

app/
phone-list/phone-list.component.js
phone-list/phone-list.module.js
phone-list/phone-list.template.html
app.module.js
phonelist.php
phonelist.json


phone-list/phone-list.component.js

angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: function PhoneListController($http) {
var self = this;
self.orderProp = 'age';

$http.get('phonelist.json').then(function(response) {
console.log(response);
self.phones = response.data;
});
}
});


phone-list/phone-list.module.js

angular.module('phoneList', []);


phone-list/phone-list.template.html

<p>Search: <input ng-model="$ctrl.query" /></p>
<p>
<select data-ng-model="$ctrl.orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</p>
<ul>
<li data-ng-repeat="phone in $ctrl.phones | filter: $ctrl.query | orderBy: $ctrl.orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>


app.module.js

angular.module('phoneCatApp', ['phoneList']);


phonelist.php

<!DOCTYPE html>
<html>
<head>
<title>AngularJS | Phone List</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="phone-list/phone-list.module.js"></script>
<script type="text/javascript" src="phone-list/phone-list.component.js"></script>
<script type="text/javascript" src="app.module.js"></script>
</head>
<body data-ng-app="phoneCatApp">
<phone-list></phone-list>
</body>
</html>


phonelist.json

[
{
"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 2,
},
{
"name": "Motorola XOOMâ„¢ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1,
},
{
"name": "MOTOROLA XOOMâ„¢",
"snippet": "The Next, Next Generation tablet.",
"age": 4
}
]


Issue I'm facing is below

enter image description here

Answer

You have extra , two place, which is leading to error in json parsing

"age": 2, //<--here
"age": 1, //<--here

You should remove the invalid , from JSON response & make sure all the properties & strings are wrap inside "(double quotes)

Comments