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, Sep 11 '13 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, Sep 11 '13 at 17:24
possible duplicate of [Self-references in object literal declarations](http://stackoverflow.com/questions/4616202/self-references-in-object-literal-declarations) — Bergi, Jan 30 '14 at 04:43

score 1 · Answer 1 · answered Sep 11 '13 at 17:17

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);
});

score 1 · Accepted Answer · answered Sep 11 '13 at 17:42

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() {

    }
}

Use a variable in object property

2 Answers2