AngularJS error : TypeError: Cannot read property 'images' of undefined

Question

AngularJS: v1.5.11

Im trying to display images from a JSON array.

Is this the proper way : $scope.mainImage = $scope.template.images[0].name;. This is the line in the error that it says cant read property of images.

My Controller in templates.js file:

.controller("TemplatesDetailsCtrl", ["$scope", "$routeParams", "$http", "$filter", function($scope, $routeParams, $http, $filter ){
    var templateId = $routeParams.templateID;
    $http.get("json/templates.json").success(function(data){
        $scope.template = $filter("filter")(data, function(d){
            return d.id == templateId;
        })[0];
        $scope.mainImage = $scope.template.images[0].name; //THIS IS LINE 30
    });
}]);

I'm trying to display the very first image from the array. So my HTML is:

<img class="img-full" src="img/{{mainImage}}">

Ben trying a lot and not able to display the image. Im getting this error:

Please help.

need to do some basic debugging... what does $routeParams.templateID return? What does $scope.template return? What does data look like? you clearly aren't getting what you expect in $scope.template so you need to dig in to find out why — charlietfl
– charlietfl, Commented Feb 11, 2017 at 19:04
You. I like you. I did a console.log(templateId) right after i defined the var templateId and got the same error. I mis-spelled $routeParams.templateID. Changing it to $routeParams.templateId worked. Thanks. I was trying this for a long time. — Somename
– Somename, Commented Feb 11, 2017 at 19:16
There you go...never assume that everything prior is what you expect it to be without checking — charlietfl
– charlietfl, Commented Feb 11, 2017 at 19:22
it's really not an answer since it is just basic debugging steps. A typo in your code really doesn't justify a full answer — charlietfl
– charlietfl, Commented Feb 11, 2017 at 19:33

Rohìt Jíndal · Accepted Answer · 2017-02-11 19:21:46Z

1

Seems like 'template' object is undefined. You can test for undefined before trying to use its properties :

if ($scope.template)
   $scope.mainImage = $scope.template.images[0].name; //THIS IS LINE 30

edited Feb 11, 2017 at 19:21

answered Feb 11, 2017 at 19:13

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

1 Comment

charlietfl Over a year ago

You are misinterpreting error ... template is undefined , not a property of it

Collectives™ on Stack Overflow

AngularJS error : TypeError: Cannot read property 'images' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related