How do I select a JavaScript Object Array within an Object Method

Question

How do I select the strings in the randomImage.images array from my randomImage.imagePicker method?

(function() {

var randomImage = {

        images : [
                'http://placehold.it/100x100',
                'http://placehold.it/200x200',
                'http://placehold.it/300x300',
                'http://placehold.it/400x400'
                ],//images Array
        imagePicker : function () {
                return console.log(randomImage.images[2]);
                }()//imagePicker Method

}//randomImage Object

})()

I get the following error in the console:

Uncaught TypeError: Cannot read property 'images' of undefined

Exactly like that. randomImage.images[2] accesses the third element in the array. Not sure what your issue is? — Felix Kling
– Felix Kling, Commented Oct 7, 2015 at 18:34

Felix Kling · Accepted Answer · 2015-10-07 18:45:22Z

1

I get the following error in the console: Uncaught TypeError: Cannot read property 'images' of undefined

The problem is that you have () after the function definition:

imagePicker : function () {
    return console.log(randomImage.images[2]);
}()//imagePicker Method
 ^^

That will immediately call the function and assign its return value to imagePicker. But at this moment randomImage hasn't been initialized yet. Its value is still undefined and that's why you get that error.

Remove the parenthesis to assign the function itself (I assume that's what you want to do):

imagePicker : function () {
    return console.log(randomImage.images[2]);
}

answered Oct 7, 2015 at 18:45

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

Zack Tanner · Accepted Answer · 2015-10-07 18:35:20Z

1

Or if you want to specify the index of the randomImage you want to get:

imagePicker : function (idx) {
  return randomImage.images[idx];
}

randomImage.imagePicker(1) will return http://placehold.it/200x200

answered Oct 7, 2015 at 18:35

Zack Tanner

2,5801 gold badge29 silver badges45 bronze badges

1 Comment

Axel Amthor Over a year ago

randomImage.imagePicker(1) doesn't actually work outside as its defined on a function scope!

Daniel Imms · Accepted Answer · 2015-10-07 18:34:06Z

0

Provided you just want it to return a random image from the images array:

DEMO

imagePicker : function () {
  var index = Math.floor(Math.random() * randomImage.images.length);
  return randomImage.images[index];
}

Returning just a specific image can be done using the index:

imagePicker : function () {
  // index 0 returns 'http://placehold.it/100x100'
  return randomImage.images[0];
}

answered Oct 7, 2015 at 18:34

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Comments

Axel Amthor · Accepted Answer · 2015-10-07 18:40:29Z

0

this is the magic word:

    (function() {

    var randomImage = {

            images : [
                    'http://placehold.it/100x100',
                    'http://placehold.it/200x200',
                    'http://placehold.it/300x300',
                    'http://placehold.it/400x400'
                    ],//images Array
            imagePicker : function () {
                    alert(this.images[2]);
                    }//imagePicker Method

    }//randomImage Object

    randomImage.imagePicker();

 })();

Be aware that randomImage variable is not available outside of the auto-function!

Fiddle here

answered Oct 7, 2015 at 18:40

Axel Amthor

11.1k1 gold badge28 silver badges45 bronze badges

Collectives™ on Stack Overflow

How do I select a JavaScript Object Array within an Object Method

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related