Angular Error: $parse:syntax Syntax Error

Question

I am building a sample app (see the plunk https://plnkr.co/edit/vDXcSPrOjw5qvBQKcYvw?p=preview).

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
  <script src="https://cdn.rawgit.com/mattiash/angular-tablesort/master/js/angular-tablesort.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/mattiash/angular-tablesort/master/tablesort.css">
  <script>
var myApp = angular.module('myApp', ['tableSort'])
  .controller("tableTestCtrl", function tableTestCtrl($scope) {
    $scope.items = [{
      "Id": "01",
      "Name": "A",
      "80th_time": "1.00",
      "median_time": "1"
    }, {
      "Id": "02",
      "Name": "B",
      "80th_time": "10.00",
      "median_time": "1"
    }, {
      "Id": "04",
      "Name": "C",
      "80th_time": "9.50",
      "median_time": "10"
    }, {
      "Id": "03",
      "Name": "a",
      "80th_time": "9.00",
      "median_time": "2"
    }, {
      "Id": "06",
      "Name": "b",
      "80th_time": "100.00",
      "median_time": "2"
    }, {
      "Id": "05",
      "Name": "c",
      "80th_time": "1.20",
      "median_time": "2"
    }];
  });
  </script>
</head>

<body>
  <div ng-controller="tableTestCtrl">
    <table border="1" ts-wrapper>
      <thead>
        <tr>
          <th ts-criteria="Id">Id</th>
          <th ts-criteria="Name|lowercase" ts-default>Name</th>
          <th ts-criteria="80th_time|parseFloat">80th Per Time</th>
          <th ts-criteria="median_time|parseFloat">Median Time</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items track by item.Id" ts-repeat>
          <td>{{ item.Id }}</td>
          <td>{{ item.Name }}</td>
          <td>{{ item.80th_time }}</td>
          <td>{{ item.median_time }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

When I change the name of the attribute from "80th_time" to "th_time" the angular parsing works. If I keep the name of the attribute as "80th_time" I get the following $parse exception:

https://docs.angularjs.org/error/$parse/syntax?p0=th_time&p1=is%20an%20unexpected%20token&p2=3&p3=80th_time%7CparseFloat&p4=th_time%7CparseFloat

Any ideas as to why this is happening ?

In order to test this (i.e. to trigger the exception) you can run the plunk and then try click on the header "80th Per Time" (to trigger the sorting based on this column).

Issue got fixed by changing the variable name from 80th_.. to 80th (basically javascript variable issue). — mithrandir
– mithrandir, Commented Aug 3, 2016 at 14:51

cyberwombat · Accepted Answer · 2016-06-30 01:13:20Z

1

When you use the notation item.80th_time you are restricted to using valid variable names. In order to use one starting with a number you will need to access it as item['80th_time'].

answered Jun 30, 2016 at 1:13

cyberwombat

40.5k43 gold badges189 silver badges268 bronze badges

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

1 Comment

pulse0ne Over a year ago

Beat me by 30 seconds

pulse0ne · Accepted Answer · 2016-06-30 01:14:16Z

1

From MDN:

An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation.

answered Jun 30, 2016 at 1:14

pulse0ne

1,1429 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular Error: $parse:syntax Syntax Error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related