Angularjs "parse:syntax" error message

Question

As I new to AngularJS, I want to understand the error messages display in console. Below you can find my json object and other details.

In JSP page:

<body id="bodyID" ng-controller="ApplicationParameterController" >
    <div ng-cloak class="ng-cloak">{{init(${displayInfo})}}</div>
    <toaster-container toaster-options="{'time-out': 3000}"></toaster-container>
    <application-param></application-param>
</body>

My json object:

displayInfo = [{"id":34,"key":"a","value":"true","description":"a","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":35,"key":"summaryReportEmail","value":"test@gmail.com","description":"summaryReportEmail","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":36,"key":"b","value":"true","description":"b","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":1,"key":"T_AND_C_ON","value":"Y","description":"c","privilege":{"privilegeID":74,"privilegeCode":"enable_tnc"}},{"id":3,"key":"soapAddress","value":"http://test.com/test/test.asmx","description":"soapAddress","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":4,"key":"soapAddressAlter","value":"http://test.com/test/test.asmx","description":"soapAddressAlter","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":27,"key":"d","value":"d","description":"d ","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":28,"key":"sts.s3.bucket.name","value":"test01-sts-healix-xmls","description":"sts.s3.bucket.name","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":29,"key":"e","value":"e","description":"e","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":30,"key":"f","value":"f/g","description":"f","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":31,"key":"g","value":"7","description":"g","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":32,"key":"enableScheduler","value":"true","description":"enableScheduler","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}},{"id":33,"key":"sts.document.api","value":"http://www.test.com/as-da-api","description":"sts.document.api","privilege":{"privilegeID":77,"privilegeCode":"app_param_admin"}}]

I am getting below error:

Error: [$parse:syntax] http://errors.angularjs.org/1.3.0-beta.14/$parse/syntax?p0=undefined&p1=is%20unexpected%2C%20expecting%20%5B%7D%5D&p2=null&p3=init(%5B%7B%22id%22%3A34%2C%22key%22%3A%22isAutoRenewalEnable%22%2C%22value%22%3A%22true%22%2C%22description%22%3A%22isAutoRenewalEnable%22%2C%22privilege%22%3A%7B%22privilegeID%22%3A77%2C%22privilegeCode%22%3A%22app_param_admin%22&p4=init(%5B%7B%22id%22%3A34%2C%22key%22%3A%22isAutoRenewalEnable%22%2C%22value%22%3A%22true%22%2C%22description%22%3A%22isAutoRenewalEnable%22%2C%22privilege%22%3A%7B%22privilegeID%22%3A77%2C%22privilegeCode%22%3A%22app_param_admin%22 G/<@https://localhost:8443/travelinsurance-aggregator/resources/scripts/angular.min.js:6:457

My init method is:

$scope.init = function(displayInfo) {
                if ($scope.displayInformation == null || $scope.displayInformation == 'undefined') {
                    $scope.displayInformation = angular.fromJson(displayInfo);
                    $scope.applicationParameters = $scope.displayInformation;
                }
            };

When I try json formatter it is showing there is no syntax error, but in error message its showing there is a syntax error. And I went through some site but I couldnt find the error solution.

Can anyone help to resolve the issue? Thanks in advance.

Just check what happens after `{{init(${displayInfo})}}` is rendered by server-side script. The problem is very obvious. — dfsq, Jul 18 '16 at 11:56
Of course it's not going to call `init`. Because parser can't parse template. Because `{{init(${displayInfo})}}` is not correct. You need to properly encode data if you render it like this. Again, check rendered HTML and see that happens there - then you will see that JSON is not correct. — dfsq, Jul 18 '16 at 12:00
You can use like ng-init="init()" and then inside that you can update your variable and showcase the inside expression — Mandeep Singh, Jul 18 '16 at 12:02
@dfsq How to check rendered HTML. Sorry for this question. I very new to angularjs stuffs. — CrazyJavaLearner, Jul 18 '16 at 12:10
@dfsq this is the error message description https://docs.angularjs.org/error/$parse/syntax?p0=undefined&p1=is%20unexpected,%20expecting%20%5B%7D%5D&p2=null&p3=init(%5B%7B%22id%22:34,%22key%22:%22isAutoRenewalEnable%22,%22value%22:%22true%22,%22description%22:%22isAutoRenewalEnable%22,%22privilege%22:%7B%22privilegeID%22:77,%22privilegeCode%22:%22app_param_admin%22&p4=init(%5B%7B%22id%22:34,%22key%22:%22isAutoRenewalEnable%22,%22value%22:%22true%22,%22description%22:%22isAutoRenewalEnable%22,%22privilege%22:%7B%22privilegeID%22:77,%22privilegeCode%22:%22app_param_admin%22 — CrazyJavaLearner, Jul 20 '16 at 05:50

score 0 · Accepted Answer · edited May 23 '17 at 10:30

I found the issue. When I try to convert object of object to json string, I used below code:

ObjectMapper jsonMapper = new ObjectMapper();
String displayJson = null;
try {
    displayJson = jsonMapper.writeValueAsString(applicationParametersForPrivilege);
} catch (Exception e) {
    e.printStackTrace();
}

But from this link I changed that to:

ObjectWriter jsonMapper = new ObjectMapper().writer().withDefaultPrettyPrinter();
String displayJson = null;
try {
    displayJson = jsonMapper.writeValueAsString(applicationParametersForPrivilege);
} catch (Exception e) {
    e.printStackTrace();
}

Now its working fine.

Angularjs "parse:syntax" error message

1 Answers1