CODEWITHSUNDEEP
angularjsparsingsyntax-error
mithrandir
mithrandir

Reputation: 1323

Angular Error: $parse:syntax Syntax Error

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

Upvotes: 0

Views: 678

Answers (2)

pulse0ne
pulse0ne

Reputation: 1102

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.

Upvotes: 1

cyberwombat
cyberwombat

Reputation: 40064

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'].

Upvotes: 1

Related Questions