Use a variable in object property

Question

I use object literal for my js, and below you can see it's "global" variables. One of them is an object (theBody) which in turn contains of an array called 'bodies'. This array contains of several objects (just one in the example below), which are svg objects.

I want to be able to assign the fill value from a specific variable, called bodyColor but when I change:

'fill':'#e59225',

to

'fill': AvGen.theBody.bodyColor,

I get the error Uncaught ReferenceError: theBody is not defined

Why is that and how can I access bodyColor for the object property?

from the js:

var AvGen = {

    paper: null,
    theBody: {
        bodies: [
            [0,0,277.9,308.5,{
                type:'path',
                'fill':'#e59225',
                'stroke':'none',
                'stroke-width':'0',
                'fill-opacity':'1',
                'stroke-opacity':'0'
            }],
        ],
        currNr: 1,
        currObj: null,
        bodyColor: '#e59225'
    },

    init: function() {

    }
}

test AvGen is defined or not, just do a console.log to test it, as error clearly specifies Uncaught ReferenceError: AvGen is not defined — Satpal
– Satpal, Commented Sep 11, 2013 at 17:03
I would guess that either AvGen is defined after you attempt to use it, or it's defined in a closure and your code referencing it isn't in scope. — Jason P
– Jason P, Commented Sep 11, 2013 at 17:24
possible duplicate of Self-references in object literal declarations — Bergi
– Bergi, Commented Jan 30, 2014 at 4:43

Vivin Paliath · Accepted Answer · 2013-09-11 17:42:07Z

You're trying to refer to something before it has already been defined! You're trying to use theBody and it hasn't been created yet. You can do something like this instead:

var AvGen = {
    paper: null,
    theBody: {
        bodies: [
            [0,0,277.9,308.5,{
                type:'path',
                'fill': null,
                'stroke':'none',
                'stroke-width':'0',
                'fill-opacity':'1',
                'stroke-opacity':'0'
            }],
        ],
        currNr: 1,
        currObj: null,
        bodyColor: '#e59225'
    },

    init: function() {

    }
}

AvGen.theBody.bodies[0][4].fill = AvGen.theBody.bodyColor;

Or even better; extract bodyColor out completely:

var bodyColor = "#e59225";
var AvGen = {
    paper: null,
    theBody: {
        bodies: [
            [0,0,277.9,308.5,{
                type:'path',
                'fill': bodyColor,
                'stroke':'none',
                'stroke-width':'0',
                'fill-opacity':'1',
                'stroke-opacity':'0'
            }],
        ],
        currNr: 1,
        currObj: null,
        bodyColor: bodyColor
    },

    init: function() {

    }
}

franchez · Accepted Answer · 2013-09-11 17:17:36Z

Check this fiddle DEMO.

I think your error is you define AvGen after your function which is using it. I first defined a js function and after AvGen and I had same error than you.

Moving AvGen block before the function code resolved the problem.

AvGen = {
paper: null,
theBody: {
    bodies: [
        [0,0,277.9,308.5,{
            type:'path',
            'fill':'#e59225',
            'stroke':'none',
            'stroke-width':'0',
            'fill-opacity':'1',
            'stroke-opacity':'0'
        }],
    ],
    currNr: 1,
    currObj: null,
    bodyColor: '#e59225'
},

init: function() {

}
}
$(document).ready(function(){   
    $('#test').attr('style', 'background-color:' + AvGen.theBody.bodyColor);
});

Collectives™ on Stack Overflow

Use a variable in object property

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related