Object[key] returns undefined (strange)

I've had a weird behaviour from an object.

var canvas = document.createElement('canvas');
canvas.style.display = 'none';
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
//imgObj is an Image Object
ctx.drawImage(imgObj, 0, 0);

//inserting(caching) the image data in the spriteData object
var spriteCoordinates = coordinates.spriteCoordinates; 
//coordinates.spriteCoordinates has keys in integer

for(var i in spriteCoordinates){
    var x = spriteCoordinates[i].x,
        y = spriteCoordinates[i].y,
        w = spriteCoordinates[i].w,
        h = spriteCoordinates[i].h;

    var imageData = ctx.getImageData(x, y, w, h);

    spriteData[i] = imageData;
}

When I console.log spriteData, I get:

Object { }

When I click on it, I get:

0: {
    width: int,
    height: int,
    data: array()
}// I've put int and array just for representation

But when I console.log spriteData[0] (spriteData['0']), I get undefined. And I've even tried to console.log Object.keys(spriteData), but I get an empty array.

Can someone tell me please what's going on?