AngularJS interpolation error when parsing Object

Question

Just starting out with AngularJS. Trying to build a single page app to display slides/pages of my comic, one at a time.

The data is getting pulled in from a JSON file, and that's working correctly. But Angular is throwing errors when I try to set up some basic binding. Any thoughts..?

HTML

<span ng-bind-html="showCurrentTitle"></span>

JS

var comicsApp = angular.module('comicsApp', ['ngSanitize']);

comicsApp.controller('comicsCtrl', ['$scope', '$http',
  function comicsCtrl($scope, $http) {
    $http.get('/luv-slimline/test/comics.json').success(function(data) {
      $scope.comics = data.comics;
    });

    $scope.showCurrentTitle = function() {
    return $scope.comics[0].title;
}
} //end ComicsCtrl
]);

Error

TypeError: Object function () { return $scope.comics[0].title; } has no method 'indexOf'

If I strip out the ngSanitize module, then the error message changes.

Alt error

Error: [$sce:unsafe] http://errors.angularjs.org/undefined/$sce/unsafe

And if I swap out the ng-bind-html directive for the older-style mustache braces, then the error message changes again.

Alt error (2)

Error: [$interpolate:interr] http://errors.angularjs.org/undefined/$interpolate/interr?p0=%7B%7BshowCurr…()%7D%7D&p1=TypeError%3A%20Cannot%20read%20property%20'0'%20of%20undefined

Help, please?

Cheers, Dan

suggest you create a simpl demo in jsfiddle.net or plunker that reproduces problem. Is title html? or just a string? — charlietfl
– charlietfl, Commented Oct 31, 2013 at 1:51
I should mention that "return $scope.comics[0].title;" is returning the correct value to the page when using mustache notation - even though it's throwing the interpolation error... When I use ngBindHtml, the return value gets lost altogether. — Dan
– Dan, Commented Oct 31, 2013 at 1:59
Thanks Charlietfl, I'll give that a crack. I tried earlier but caught up with making the JSON work. Might load in a dummy object... — Dan
– Dan, Commented Oct 31, 2013 at 2:00

Phil Sandler · Accepted Answer · 2013-10-31 02:34:42Z

2

I'm not familiar with the errors you are receiving, or ng-sanitize or the ng-bind-html tag. However, your javascript code looks problematic to me.

var comicsApp = angular.module('comicsApp', ['ngSanitize']);

    comicsApp.controller('comicsCtrl', ['$scope', '$http',
      function comicsCtrl($scope, $http) {

       //so this runs immediately, but . . .
       $http.get('/luv-slimline/test/comics.json').success(function(data) {
          // . . . this is going to happen async, so this value won't be set 
          //before the initial binding occurs
          $scope.comics = data.comics;
        });
    $scope.showCurrentTitle = function() {
    // . . . as a result, comics will be undefined initially.
    return $scope.comics[0].title;
}
} //end ComicsCtrl
]);

I think you need to define an initial value for $scope.comics before your http.get. Something like:

$scope.comics = [];
$scope.comics.push({title: "testTitle"});

Edit

Based on your comment, if you are now just binding to showCurrentTitle (which I would rename to currentTitle, as it makes more sense), you shouldn't even need to initialize $scope.comics--it should work without that code.

edited Oct 31, 2013 at 2:34

answered Oct 31, 2013 at 2:02

Phil Sandler

28.1k21 gold badges88 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan Over a year ago

Thanks Phil, it was that simple. Cheers!

Dan Over a year ago

Phil's answer has got rid of the errors, but it looks like I've got a follow-up question now. Using mustache notation, "return $scope.comics[0].title" gets injected into the HTML page. Using ng-bind-html, it doesn't. Any thoughts?

Phil Sandler Over a year ago

Again, I'm not familiar with ng-bind-html, but if you want to do a "regular" binding (with braces), don't make showCurrentTitle a function, just set it to a value: $scope.showCurrentTitle = $scope.comics[0].title;

Collectives™ on Stack Overflow

AngularJS interpolation error when parsing Object

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related