I have this strange error that i'm not sure how to solve. I keep getting Error: Syntax Error: Token ',' is an unexpected token at column 6 of expression [Cough, splutter, slobber Who are you? What do you want?] which has been loaded from a JSON file. It has been working for weeks but now it's not

This is the line of code calling the String

<div id="story-text" ng-bind-html-unsafe="{{page.text}}" ></div>

And this is the factory loading the data which seems to load correctly

  .factory('Stories', ['$http', function($http) {

            var factory = {};
            var stories = null;

            stories = $http.get('./json/stories.json')
                    .success(function(data) {
                        stories = data;

                    })
                    .error(function(data, status) {
                        alert(data);
                        alert(status);
                    });
            factory.getStories = function() {
                return stories;
            };
            factory.getStory = function(id) {
                return stories[id];
            };
            factory.getPage = function(id, page) {
                return stories[id].pages[page];
            };
            return factory;
        }])

finally this line loads the data from the JSON file into the scope to be exectuted on the partial

 $scope.page = Stories.getPage($scope.param.id - 1, $scope.param.pageNo - 1);

As far as i can tell there is nothing obvious that stands out to be wrong The JSON being loaded is

"PageNo": 1,
"text": "Cough, splutter, slobber </br> Who are you? What do you want?",
"image": "img/story-1/jpg/1.jpg",
"sound_background": "sound/story-1-sound/Story1A.aif",
"sound_voiceover": "sound/story-1-voiceover/Story1-01.mp3"

Can anyone see something im not

I have this strange error that i'm not sure how to solve. I keep getting Error: Syntax Error: Token ',' is an unexpected token at column 6 of expression [Cough, splutter, slobber Who are you? What do you want?] which has been loaded from a JSON file. It has been working for weeks but now it's not

This is the line of code calling the String

<div id="story-text" ng-bind-html-unsafe="{{page.text}}" ></div>

And this is the factory loading the data which seems to load correctly

  .factory('Stories', ['$http', function($http) {

            var factory = {};
            var stories = null;

            stories = $http.get('./json/stories.json')
                    .success(function(data) {
                        stories = data;

                    })
                    .error(function(data, status) {
                        alert(data);
                        alert(status);
                    });
            factory.getStories = function() {
                return stories;
            };
            factory.getStory = function(id) {
                return stories[id];
            };
            factory.getPage = function(id, page) {
                return stories[id].pages[page];
            };
            return factory;
        }])

finally this line loads the data from the JSON file into the scope to be exectuted on the partial

 $scope.page = Stories.getPage($scope.param.id - 1, $scope.param.pageNo - 1);

As far as i can tell there is nothing obvious that stands out to be wrong The JSON being loaded is

"PageNo": 1,
"text": "Cough, splutter, slobber </br> Who are you? What do you want?",
"image": "img/story-1/jpg/1.jpg",
"sound_background": "sound/story-1-sound/Story1A.aif",
"sound_voiceover": "sound/story-1-voiceover/Story1-01.mp3"

Can anyone see something im not

• javascript
• angularjs

• 1 Is it contained in an object literal, { ... }? – p.s.w.g Commented Nov 11, 2013 at 2:06
• yeh its part of a larger JSON file which is way to big for here – Ardenexal Commented Nov 11, 2013 at 2:06
• Hmm, I'm seeing an interesting repeatable result when I: 1. ctrl-c what you show 2. ctrl-v into JsonLint and and validate without enclosing in {} and it won't 3. enclose in {} and validate and it still shows an error but a different one 4. take out the blank after cough and then it validates I don't have any explanation for that behavior. – Terry Commented Nov 11, 2013 at 2:19
• @Terry i'm not sure what you mean – Ardenexal Commented Nov 11, 2013 at 2:21
• @Terry when the whole JSON file is in it validates fine and i do it every time i make a change to the document. no idea why one section wouldn't work but i figured out the problem anyway, thanks for the help – Ardenexal Commented Nov 11, 2013 at 2:36

2 Answers 2

You can use {{}} with ng-bind-html and ng-bind-html-unsafe.

Just wrap the curly brackets in single quotes as such:

<div id="story-text" ng-bind-html="'{{page.text}}'" ></div>

You can even bine it with filters

<div id="story-text" ng-bind-html="'{{page.text | uppercase}}'" ></div>

Ok so i figured it out apparently you can't use the {{}} if the value of ng-bind-html-unsafe is a string. My guess is that angular tries to evaluate it as a function or something causing problems

So

<div id="story-text" ng-bind-html-unsafe="{{page.text}}" ></div>

should be

<div id="story-text" ng-bind-html-unsafe="page.text" ></div>