Saurabh Sharma Saurabh Sharma - 1 year ago 112
AngularJS Question

Angular getting Syntax Error: Token ':' is an unexpected token while accessing URLs from JSON

I have the following json and I am pulling

from it

"name": "Lifehacker",
"handle": "@lifehacker",
"avatar": "images/lifehacker.png",
"time": "1h",
"tweet": "Workflow, the nifty automation app on iOS, just got a heck of a lot easier to use: ",
"attachments": {
"media": "image",
"url": "images/twitter.jpg"
"tweeturl": "",
"interaction": {
"like": "2m",
"retweet": "5k"

and displaying it like this:

<a href="{{tweets.tweeturl}}" ng-show="{{tweets.tweeturl}}">{{tweets.tweeturl}}</a>

but everytime it executes I get the URL but also receive errors on console saying

Syntax Error: Token ':' is an unexpected token at column 5 of the expression [] starting at [://].

I am pretty new to angular any help and explanation will be appreciated

Answer Source

ng-show expects an expression (e.g. a name of a defined in the scope variable, that evaluates to truthy or falsy value), not a string.

You don't have to interpolate it using {{ }} syntax. Just pass the variable directly:

<a href="{{tweets.tweeturl}}" ng-show="tweets.tweeturl">{{tweets.tweeturl}}</a>

When you write ng-show="{{tweets.tweeturl}}" instead, what happens is Angular first interpolates {{tweets.tweeturl}} to - and then it tries to treat it as an expression, so it's like you'd try to write a javascript like this:

function someFunction () {
   var abc = '123';    // <- this is not a correct expression
   return abc;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download