CODEWITHSUNDEEP
javascriptangularjs
Manikandan S
Manikandan S

Reputation: 922

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

Upvotes: 1

Views: 97

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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)

Upvotes: 6

Related Questions