Cannot read parent's proprety in JSON

Question

Why it isn't working?

I get this error message:

TypeError: Cannot read property 'width' of undefined

var option = jQuery.extend({
    parent: this,
    width:  280,
    height: 280,

    circle: {
        x:          (option.width / 2) + 5,   // <= HERE!
        y:          (option.height / 2) + 22, // <= AND ALSO HERE!
        radius:     70,
        speed:      5,
        rotation:   0,
        angleStart: 270,
        angleEnd:   90,
        hue:        220,
        thickness:  15,
        blur:       20
    }
}, options);

How can i read "parent" property?
Should I use another prefix?

Answer 1

You cannot work with object like that, you'll have to do something like this;

 var width = height = 280; // store values
 var option = jQuery.extend({
        parent: this,
        width:  width,
        height: height

        circle: {
            x:          (width / 2) + 5,   // option doesn't exist
            y:          (height / 2) + 22, // option doesn't exist
            radius:     70,
            speed:      5,
            rotation:   0,
            angleStart: 270,
            angleEnd:   90,
            hue:        220,
            thickness:  15,
            blur:       20
        }
    }, options);
 // option is now created and exists here

You could do something like this

var tempOption = {
    parent: this,
    width:  280,
    height: 280
};


tempOption.circle = {
    x:          (tempOption.width / 2) + 5,   // option doesn't exist
    y:          (tempOption.height / 2) + 22, // option doesn't exist
    speed:      5,
    rotation:   0,
    angleStart: 270,
    angleEnd:   90,
    hue:        220,
    thickness:  15,
    blur:       20
};


var option = jQuery.extend(tempOption, options);

Answer 2

When x: (option.width / 2) + 5, runs, option doesn't exist yet, so you can't access option.width.

Just do it like this:

var width = 280;
var height = 280;
var option = jQuery.extend({
    parent: this,
    width:  width,
    height: height,

    circle: {
        x:          width / 2 + 5,
        y:          height / 2 + 22,
        radius:     70,
        speed:      5,
        rotation:   0,
        angleStart: 270,
        angleEnd:   90,
        hue:        220,
        thickness:  15,
        blur:       20
    }
}, options);