JavaScript Object Call Not Working

Question

I have a certain object created like this:

var classes = {

        login: {
            form: {
                wrapper:        'content-login',
                cls:            'login-form',
                fields:         'login-fields'
            },
            username: {
                wrapper:        'username-wrapper',
                label:          'user-img',
                input:          'username'
            },
            password: {
                wrapper:        'password-wrapper',
                label:          'pass-img',
                input:          'password'
            },
            button: {
                wrapper:        'login-wrapper',
                proceed:        'login'
            },
            toogle: {
                trigger: {
                    wrapper:    'toogle-button',
                    button:     'toogle'
                },
                buttons: {
                    wrapper:    'toogle-buttons',
                    twitter:    'twitter-login',
                    register:   'register',
                    recover:    'recover-password'
                }
            }   
        },

        register: {
            form: {
                wrapper:        'content-register',
                cls:            'register-form',
                fields:         'register-fields'
            },
            username: {
                wrapper:        'username-wrapper',
                label:          'username-label',
                input:          'username'
            },
            email: {
                wrapper:        'email-wrapper',
                label:          'email-label',
                input:          'email' 
            },
            password: {
                wrapper:        'password-wrapper',
                label:          'password-label',
                input:          'password'  
            },
            confirm: {
                wrapper:        'confirm-wrapper',
                label:          'confirm-label',
                input:          'confirm'
            },
            captcha: {
                wrapper:        'captcha-wrapper',
                label:          'captcha-label',
                input:          'captcha'
            },
            button: {
                wrapper:        'register-wrapper',
                message:        'message-handling',
                proceed:        'register'
            },
            back: {
                wrapper:        'back-button',
                button:         'back'
            }
        },

        recover: {
            form: {
                wrapper:        'content-recover',
                cls:            'recover-form',
                fields:         'recover-fields'
            },
            email: {
                wrapper:        'email-wrapper',
                label:          'email-label',
                input:          'email' 
            },
            button: {
                wrapper:        'recover-wrapper',
                proceed:        'recover'
            },
            back: {
                wrapper:        'back-button',
                button:         'back'
            }
        },

        reset: {
            form: {
                wrapper:        'content-reset',
                cls:            'reset-form',
                fields:         'reset-fields'
            },
            email: {
                wrapper:        'email-wrapper',
                label:          'email-label',
                input:          'email'
            },
            authcode: {
                wrapper:        'authcode-wrapper',
                label:          'authcode-label',
                input:          'authcode'  
            },
            password: {
                wrapper:        'password-wrapper',
                label:          'password-label',
                input:          'password'  
            },
            confirm: {
                wrapper:        'confirm-wrapper',
                label:          'confirm-label',
                input:          'confirm'
            },
            button: {
                wrapper:        'proceed-wrapper',
                message:        'message-handling',
                proceed:        'proceed'
            },
            back: {
                wrapper:        'back-button',
                button:         'back'
            }
        },

        success: {
            wrapper:            'after-login',
            message:            'row-one',
            buttons: {
                wrapper:        'row-two',
                cancel:         'cancel',
                proceed:        'continue'  
            }
        },

        lockdown: {
            wrapper:            'system-lockdown',
            message:            'row-one',
            buttons: {
                wrapper:        'row-two',
                back:           'back'
            }
        }

    }

And I'm trying to call a certain key like this:

classes[login.form.wrapper];

But it doesn't work that way, only like this:

classes.login.form.wrapper;

Or like this:

classes['login'];

Can someone tell me why it doesn't work like this :

classes[login.form.wrapper];

And can I make it work like that ? Because I have seen this method somewhere but I don't know if it is the same thing I have.

Konrad Dzwinel · Accepted Answer · 2012-01-16 11:29:56Z

3

Use this:

classes['login']['form']['wrapper']

Code you are trying to invoke is just invalid:

classes[login.form.wrapper];

You are referring to the login variable that is not defined.

answered Jan 16, 2012 at 11:29

Konrad Dzwinel

38.1k12 gold badges102 silver badges106 bronze badges

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

Comments

James Allardice · Accepted Answer · 2012-01-16 11:40:03Z

1

classes[login.form.wrapper]; is looking for an object named login in whatever scope the line of code runs in. That won't be found, because login is a property of classes. This will therefore throw a ReferenceError, because login is undefined.

If login was defined, and had a property named form which in turn had a property named wrapper, the value of that property would be used:

var login = {
        form: {
            wrapper: 'login'
        }
    };
console.log(classes[login.form.wrapper]); //Now this would return classes.login

classes.login.form.wrapper; works, because classes is an object with a property named login.

classes['login']; is equivalent to classes.login. You could write classes['login']['form']['wrapper'] as an equivalent to classes.login.form.wrapper.

edited Jan 16, 2012 at 11:40

answered Jan 16, 2012 at 11:27

James Allardice

166k22 gold badges335 silver badges315 bronze badges

5 Comments

Roland Over a year ago

Yes, I have found that I cannot since I tried debugging with try { ... } catch { ... } and I saw that it gives me an ReferenceError, but, isn't there a way to make that work ? Because I have more than 500 lines of code to modify to the right way to make it work ?

James Allardice Over a year ago

@Roland - See my edit. You could create a login object with the appropriate properties, but that's very messy. I would suggest restructuring your code!

Roland Over a year ago

You mean doing classes['login']['form']['wrapper'] . Well, if that's the case it means I will have to go through all of it and do that :(

James Allardice Over a year ago

@Roland - Sorry, I've got it wrong. You are going to have to change it all really!

Roland Over a year ago

No problem, I've written a PHP script that opens a text file and looks for every [ and ] occurrence and replaces it with [' and '] and also before that look for . inside [ ... ] and replace it with ][ and this did it all in a few milliseconds :) It's a good thing that I've got bored to do that manually and thought about doing a PHP script :D :) Thanks you for the info, I thought I had a bigger problem :)

Shamim Hafiz - MSFT · Accepted Answer · 2012-01-16 11:30:34Z

1

The answer is pretty much with your description.

What you basically want is to access a particular attribute, nested attributes in your case.

classes.login.form.wrapper;

This is quite intuitive to realize that, login is inside classes, form inside login and wrapper inside form.

JavaScript also allows you to use property names as indexes, as in:

classes['login'];

However, with

classes[login.form.wrapper];

It's actually implying to look for the attribute of classes whose name is stored in

login.form.wrapper

clearly, login.form.wrapper, doesn't exist on it's own.

answered Jan 16, 2012 at 11:30

Shamim Hafiz - MSFT

22.2k44 gold badges122 silver badges183 bronze badges

Comments

zaphod1984 · Accepted Answer · 2012-01-16 11:28:21Z

0

when you write

classes[login.form.wrapper];

an object login is expected. as login is part of classes, you have to specify the whole 'path' to the class.

answered Jan 16, 2012 at 11:28

zaphod1984

8562 gold badges8 silver badges24 bronze badges

Comments

Tushar Ahirrao · Accepted Answer · 2012-01-16 11:29:05Z

0

You can not call object like this

classes[login.form.wrapper];

because login is key of your objects class, it will work like this

classes['login'] OR classes.login

Your key should not be like this : classes[login.form.wrapper];

answered Jan 16, 2012 at 11:29

Tushar Ahirrao

13.2k18 gold badges67 silver badges101 bronze badges

Collectives™ on Stack Overflow

JavaScript Object Call Not Working

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related