JavaScript object says nested objects are undefined [duplicate]

Question

In the JavaScript demo code below I am getting errors in the console anytime I call anything nested under this object BookmarkScreenshots.fullPageScreenshot where it says (index):63 Uncaught TypeError: Cannot read property 'fullPageScreenshot' of undefined

Demo JSFiddle: https://jsfiddle.net/vr5j2tnm/

Demo Code:

var BookmarkScreenshots = {

    test: function(){
        console.log('BookmarkScreenshots.test() ran');
    },


    fullPageScreenshot: {


        //BookmarkScreenshots.fullPageScreenshot.cache.
        cache: {
            body: document.body,
            html: document.documentElement,
            fullWidthOld: document.width,
            fullHeightOld: document.height,
            originalX: window.scrollX,
            originalY: window.scrollY,
            windowScrollX: BookmarkScreenshots.fullPageScreenshot.cache.originalX,
            fullWidth: document.body.clientWidth,
            fullHeight: Math.max(BookmarkScreenshots.fullPageScreenshot.cache.body.scrollHeight, BookmarkScreenshots.fullPageScreenshot.cache.body.offsetHeight,
            BookmarkScreenshots.fullPageScreenshot.cache.html.clientHeight, BookmarkScreenshots.fullPageScreenshot.cache.html.scrollHeight, BookmarkScreenshots.fullPageScreenshot.cache.html.offsetHeight),
            windowWidth: window.innerWidth,
            windowHeight: window.innerHeight,
            originalOverflowStyle: document.documentElement.style.overflow,
            arrangements: [],
            // pad the vertical scrolling to try to deal with
            // sticky headers, 200 is an arbitrary size
            scrollPad: 200,
            yDelta: BookmarkScreenshots.fullPageScreenshot.cache.windowHeight - (BookmarkScreenshots.fullPageScreenshot.cache.windowHeight > BookmarkScreenshots.fullPageScreenshot.cache.scrollPad ? BookmarkScreenshots.fullPageScreenshot.cache.scrollPad : 0),
            xDelta: BookmarkScreenshots.fullPageScreenshot.cache.windowWidth,
            yPos: BookmarkScreenshots.fullPageScreenshot.cache.fullHeight - BookmarkScreenshots.fullPageScreenshot.cache.yDelta + 1,
            xPos: '',
            numArrangements: '',
            cleanUpTimeout: '',
            port: chrome.runtime.connect({name: 'page capture'}),
            message: {
                msg: 'capture',
                totalWidth: BookmarkScreenshots.fullPageScreenshot.cache.fullWidth,
                totalHeight: BookmarkScreenshots.fullPageScreenshot.cache.fullHeight
            },
        },

        init: function(){
            console.log('ran BookmarkScreenshots.fullPageScreenshot.init()');
        },
    }
}




(function() {
    BookmarkScreenshots.test();
    BookmarkScreenshots.fullPageScreenshot.init();

    console.log('BookmarkScreenshots.fullPageScreenshot.cache.windowScrollX', BookmarkScreenshots.fullPageScreenshot.cache.windowScrollX);
})();

you can try in this way: jsfiddle.net/vr5j2tnm/1 i hope this will help — DK3
– DK3, Commented Apr 13, 2016 at 14:08
I am thinking maybe I can set all the properties in my cache object and then add a new setCache() or buildCache() function which will populate the cache properties? — JasonDavis
– JasonDavis, Commented Apr 13, 2016 at 17:17

zzzzBov · Accepted Answer · 2016-04-13 13:42:26Z

1

windowScrollX: BookmarkScreenshots.fullPageScreenshot.cache.originalX attempts to be self-referential, but BookMarkScreenshots doesn't exist yet, so you're essentially calling (undefined).fullPageScreenshot.cache.originalX.

answered Apr 13, 2016 at 13:42

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

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

2 Comments

JasonDavis Over a year ago

this keyword won't solve the problem without restructuring the object literal significantly do you mind going into this a bit more with example possibly?

zzzzBov Over a year ago

@JasonDavis, your object literal is complex and deeply nested. Consider using a constructor function and the new keyword so that you have a scope within which you can use this. If you're never going to create another one of these objects, you can use an anonymous function.

Lulylulu · Accepted Answer · 2016-04-13 13:43:59Z

0

This is because your object wasn't created yet when you are trying to access its properties.

You should use this inside the object.

But your structure is complex, so I suggest you use multiple instructions to create the object.

edited Apr 13, 2016 at 13:43

answered Apr 13, 2016 at 13:41

Lulylulu

1,2648 silver badges17 bronze badges

2 Comments

JasonDavis Over a year ago

thanks I assumed it was something simple!

zzzzBov Over a year ago

The this keyword won't solve the problem without restructuring the object literal significantly.

Collectives™ on Stack Overflow

JavaScript object says nested objects are undefined [duplicate]

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related