Image object in array is undefined

Question

I am doing some simple preloading of images using promises. This function is part of a larger Angular(1.3.15) custom directive

JS

function preLoad() {
        var deferred = $q.defer();
        var imageArray = [];
        for (var i = 0; i < $scope.abbreviations.length; i++) {
            imageArray[i] = new Image();
            imageArray[i].src = $scope.abbreviations.imgPath;
            //logging
            console.log(imageArray[i]);
            console.log(imageArray[i].src);
            console.log($scope.abbreviations);
            console.log($scope.abbreviations.imgPath);
        }
        imageArray.forEach.onload = function () {
            deferred.resolve();
            console.log('Resolved');
        }
        imageArray.forEach.onerror = function () {
            deferred.reject();
            console.log('Rejected')
        }
        return deferred.promise;
    }

abbreviations have this format:

abbreviations: [
        {
            name: 'a<sup>o</sup>',
            tag: 'anno',
            imgPath: 'images/keypad/anno.png'
            },
        {
            name: 'esq.',
            tag: 'esquire',
            imgPath: 'images/keypad/esquire.png'
            },
        {
            name: 'ex<sup>t</sup>, exaite',
            tag: 'examinant',
            imgPath: 'images/keypad/examinant.png'
            }
        ]

Logs (Chrome console)

I can access all the objects at $scope.abbreviations and on inspection imgPath property is defined.

So why is $scope.abbreviations.imgPath is undefined ?

Answer 1

$scope.abbreviations is a array.

so fix like this:

function preLoad() {
        var deferred = $q.defer();
        var imageArray = [];
        for (var i = 0; i < $scope.abbreviations.length; i++) {
             var abb = $scope.abbreviations[i]; //assign to a variable and use it. if you are refering more than one places.
            imageArray[i] = new Image();
            imageArray[i].src = abb.imgPath;
            //logging
            console.log(imageArray[i]);
            console.log(imageArray[i].src);
            console.log(abb);
            console.log(abb.imgPath);
        }
        imageArray.forEach.onload = function () {
            deferred.resolve();
            console.log('Resolved');
        }
        imageArray.forEach.onerror = function () {
            deferred.reject();
            console.log('Rejected')
        }
        return deferred.promise;
    }

Answer 2

To get the img path out correctly you need to follow it the [i] where i is the number of the object in the array.

Change the line

console.log($scope.abbreviations[i].imgPath);

and you will the the result, then apply this to where you need the actual values to come out.