I encountered an issue when attempting to create an AngularJS ui-grid table with data that includes a '(' and then whitespace before the closing ')' within a string. This resulted in an AngularJS error message:
Syntax Error: Token '32' is unexpected, expecting [)] at column 22 of the expression [entity[''](trimpoint 32h)] starting at [32h].
Below is the HTML code I used in an attempt to build the table:
<html> <head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyGridApp', ['ui.grid']);
app.controller('bodyController', ['$scope', function($scope) {
$scope.myData = [{'(trimpoint 32h)': "Moroni", age: 50},
{'(trimpoint 32h)': "Tiancum", age: 43},
{'(trimpoint 32h)': "Jacob", age: 27}];
$scope.gridOptions = { data : 'myData' }; }]);
</script> </head> <body ng-app="MyGridApp" ng-controller="bodyController">
<div ui-grid="gridOptions">
</div> </body> </html>
By replacing the round brackets with square brackets, the table renders without any issues. Here's how the data looks after the modification:
$scope.myData = [{'[trimpoint 32h]': "Moroni", age: 50},
{'[trimpoint 32h]': "Tiancum", age: 43},
{'[trimpoint 32h]': "Jacob", age: 27}];
I am curious about why AngularJS throws an error while trying to interpret this data. It appears to be a valid JavaScript string for use as an object name. Any insights would be appreciated. Thank you.