AngularJS binding chokes on closing round bracket in JSON

Question

I'm getting this error:

Error: [$parse:lexerr] Lexer Error: Unterminated quote ...

.... when angular tries to bind some JSON to my view. This is because part of my json has a closing round bracket like this:

[{"title":"(MyString)"}]

This is correctly formed in the JSON, however at some point when angular tries to bind the JSON, I get the error. It's like angular is interpreting the closing round bracket as JavaScript or something, so it fails to recognise any of the JSON after 'MyString', and sees the JSON as malformed. I've googled and looked at similar errors on StackOverflow, but can't see anything talking about issues with a round closing bracket in JSON causing problems with angular.

My JSON defines geographic locations, and I suspect the issue may be occuring when angular tries to bind the locations in an ng-repeat directive like this:

<div ng-repeat="loc in mapsCtrl.locations">

I tried using the ngSanitize module to sanitize the json within my controller javascript (I know that's for HTML sanitization, however I wondered if it might work - it didn't):

title: this.$sanitize(results.MapLocation[i].Title),

I've also tried a Javascript replace:

title: results.MapLocation[i].Title.replace(")","\)"

but for some reason (maybe because I'm using TypeScript which then gets transpiled?), the JSON looks exactly the same when I inspect in the Chrome debugger:

title: "(MyString)"

So I then try a double escape:

title: results.MapLocation[i].Title.replace(")","\\)"

... and my JSON in the debugger looks like:

title : "(MyString\)"

... but I get the same error. This looks like a bug in angular. I'm thinking maybe there's some specific Angular directive I need to use for the binding? Using 'ng-bind' instead of {{}} for the expression shouldn't make any difference, since ng-bind is just longhand for the curly brace syntax. I'd appreciate any advice or suggestions on any way to fix this issue.

Yes, pls show more of ur code, seems specific to ur view and binding. — dev8080, Nov 01 '17 at 08:09
It is working fine for me, try to check **source** of data in details, may be some mistakes with encoding or serialization. Also try to apply `JSON.parse`, to check is all ok with your data. — Slava Utesinov, Nov 01 '17 at 10:45

Chris Halcrow · Answer 1 · 2017-11-02T00:51:46.460

I discovered that the error is actually occurring when {{loc}} is bound inside the on-mouseover below. I really should remember this more - simple divide and conquer to determine exactly where the error is occurring, by commenting out or removing sections of the code:

<ng-map .... 
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker id="L: {{loc.position[0]}}, {{loc.position[1]}}" position="{{loc.position}}"
                on-mouseover="mapsCtrl.handleMarkerMouseover(event, {{loc}}, mapsCtrl.NgMap, mapsCtrl)"
    ...
</ng-map>

... and if I use ng-mouseover instead, it fixes the error. Now though, the events don't fire. So if I now change the on-mouseover so that I'm not trying to interpolate {{loc}}, everything works:

<ng-map .... 
    <div ng-repeat="loc in mapsCtrl.locations">
        <marker id="L: {{loc.position[0]}}, {{loc.position[1]}}" position="{{loc.position}}"
                on-mouseover="mapsCtrl.handleMarkerMouseover(event, loc, mapsCtrl.NgMap, mapsCtrl)"
    ...
</ng-map>

So if AngularJS is interpolating JSON, it seems that the specific context in which it's doing that needs to be specifically declared to be 'in the AngularJS realm' - in this case interpolation of JSON in a mouseover will need to be done in an ng-mouseover, otherwise if using on-mouseover and passing in JSON, don't use interpolation.

AngularJS binding chokes on closing round bracket in JSON

1 Answers1