Properties for an object and this

Question

I would like Create an object to store variables which I will use in my web app.

I cannot access the clientId and clientSecret from uriGetToken using this.

Also I can use the function in mApiGetToken in token.

Could you tell me what I'm doing wrong and how to fix it?

   $(document).ready(function () {

        // General Settings
        var mApiSettings = {
            clientId: 'aaa',
            clientSecret: 'bbb',
            token: mApiGetToken(),
            uriGetToken: 'https://ccc/oauth/token?grant_type=client_credentials&client_id=' + this.clientId + '&client_secret=' + this.clientSecret
        }

        console.log(mApiSettings.uriGetToken);
        // Get Autheticated, it requires getting a Token from HollyByte
        function mApiGetToken() {

            $.getJSON(mApiSettings.uriGetToken, processData);
            function processData(data) {
                mApiSettings.token = data.access_token;
            }
            //return token;
        }

        // For Testing
        console.log(mApiGetToken());

    });

possible duplicate of [How to return AJAX response Text?](http://stackoverflow.com/questions/1225667/how-to-return-ajax-response-text) — Quentin, Nov 08 '12 at 13:38
sorry but your link it is not related to my question, I have a problem with this in a property — GibboK, Nov 08 '12 at 13:38
I just noticed that while the question does answer a problem you have, you haven't encountered that problem yet. — Quentin, Nov 08 '12 at 13:39
you don't have to define an extra pair of variables. I have fixed the error from the code in my answer. — AlexStack, Nov 08 '12 at 14:12

score 2 · Accepted Answer · answered Nov 08 '12 at 13:40

The value of this is determined for the function in which it appears when that function is called.

There is no connection between the object literal in which you are using this and the value of this.

There is also no way to access a property of an object in the middle of the object literal statement that is creating it.

You need to use variables.

Although your examples don't have any special characters in them, you should make it a habit to escape any data you are inserting into a URI.

    var clientId, clientSecret, mApiSettings;
    clientId = 'aaa';
    clientSecret = 'bbb';
    mApiSettings = {
        clientId: clientId,
        clientSecret: clientSecret,
        token: mApiGetToken(),
        uriGetToken: 'https://ccc/oauth/token?grant_type=client_credentials&client_id=' + encodeURIComponent(clientId) + '&client_secret=' + encodeURIComponent(clientSecret)
    }

thanks for your last edit, may I ask you the reason why do you escape character within the URL? thanks — GibboK, Nov 09 '12 at 07:09
Because if the data contains a special character (such as `&`) then it won't be passed correctly. — Quentin, Nov 09 '12 at 08:54

AlexStack · Answer 2 · 2012-11-08T14:11:23.327

It is a common Javascript question because this keyword doesn't behave like other OOP language like Java or C++.

The problem is:

var o = {
    a : 2,
    b : this.a *2
}
console.log( b ); //prints NaN because the value for this.a is undefined at the time b is being initialized

Because this is not accessible inside the object literal initialization. A workaround would be to use the name of the object instead of this:

var o = {
    a : 2,
    b : o.a *2
}
console.log( b ); //prints 4

Or you can define the object one-piece at a time:

var o = {
    a : 2
}
o.b = o.a *2;
console.log( b ); //prints 4

Anyway your code should work if you change the mApiSettings to:

var mApiSettings = {
            clientId: 'aaa',
            clientSecret: 'bbb',
            token: mApiGetToken()
}

mApiSettings.uriGetToken = 'https://ccc/oauth/token?grant_type=client_credentials&client_id=' + mApiSettings.clientId + '&client_secret=' + mApiSettings.clientSecret;

You can read more about the Javascript this keyword here: http://unschooled.org/2012/03/understanding-javascript-this/

EDIT:

as the other answer suggests you may want to encode your clientSecret and clientId before embedding them into the URL. If that is the case, you can use this code:

var mApiSettings = {
            clientId: 'aaa',
            clientSecret: 'bbb',
            token: mApiGetToken()
}

mApiSettings.uriGetToken = 'https://ccc/oauth/token?grant_type=client_credentials&client_id=' + encodeURIComponent( mApiSettings.clientId ) + '&client_secret=' + encodeURIComponent( mApiSettings.clientSecret );

"Anyway your code should work if you change…" — No, it shouldn't. It will give `Uncaught TypeError: Cannot read property 'clientId' of undefined` because the object literal isn't assigned to `mApiSettings` until it has been created. — Quentin, Nov 08 '12 at 13:53

Properties for an object and this

2 Answers2