JavaScript object says nested objects are undefined

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: https://jsfiddle.net/vr5j2tnm/1/ i hope this will help — DK3, Apr 13 '16 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, Apr 13 '16 at 17:17

score 1 · Answer 1 · answered Apr 13 '16 at 13:42

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 '16 at 13:42

zzzzBov

174,988
54
320
367

`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? – JasonDavis Apr 13 '16 at 13:46
@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](http://stackoverflow.com/a/15960027/497418). – zzzzBov Apr 13 '16 at 13:52

Lulylulu · Answer 2 · 2016-04-13T13:43:59.110

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 '16 at 13:43

answered Apr 13 '16 at 13:41

Lulylulu

1,254
8
17

thanks I assumed it was something simple! – JasonDavis Apr 13 '16 at 13:43
The `this` keyword won't solve the problem without restructuring the object literal significantly. – zzzzBov Apr 13 '16 at 13:45

JavaScript object says nested objects are undefined

2 Answers2