0

Quick query that's confusing me.

Doing this: console.dir(playerObjects);

Returns this:

Array[0]
0: hiderGameClient.obj.player
1: hiderGameClient.obj.player
length: 2
__proto__: Array[0]

But when I do this: console.dir(playerObjects[0]);

It returns this:

undefined

When the expected result should be this:

0: hiderGameClient.obj.player
    displayObject: 1
    location: Array[2]
    name: "asdf"
   __proto__: Object

Any ideas what's happening?

I can't really post a fiddle as it's calling data from node using websockets.

Creating the array of objects:

data.forEach(function(obj) {
    var tmp = new hiderGameClient.obj.player();
    tmp.name = obj.displayName; // Gonna actually skip this binding after it's fixed
    tmp.location = obj.pos;
    tmp.displayObject = obj.object;
    playerObjects.push(tmp);
});

Edit 2:

hiderGameClient.gfx.updateGame = function() {
    playerObjects = [];
    getAllPlayerData = hiderGameClient.net.getAllPlayerData(function(data){
        data.forEach(function(obj) {
            var tmp = new hiderGameClient.obj.player();
            tmp.name = obj.displayName; // Gonna actually skip this binding after it's fixed
            tmp.location = obj.pos;
            tmp.displayObject = obj.object;
            playerObjects.push(tmp);
        });
    });
};

hiderGameClient.gfx.drawGame = function() {
    console.dir(playerObjects[0].toString());
    console.log("typeof playerObjects: " + typeof playerObjects);
    console.log("typeof playerObjects[0]: " + typeof playerObjects[0]);

    playerObjects.forEach(function(obj) {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var imageObj = new Image();
        imageObj.onload = function() {
            context.drawImage(imageObj, 200, 300);
        };
        imageObj.src = './maps/' + map + '/obj/' + '1' + '.png';
    });
};
hiderGameClient.net.getAllPlayerData = function(callback) {
    socket.emit('whereare players', {timestamp: new Date().getTime()});
    socket.on('answer playerPositions', function(data) {
        callback(data);
    });
}

Edit 3:

Forgot main loop function:

hiderGameClient.gfx.mainloop = function() {
    this.updateGame();
    this.drawGame();
};
Crisoforo Gaspar
  • 3,740
  • 2
  • 21
  • 27
Harry Torry
  • 373
  • 5
  • 25
  • could you post a fiddle with the error? – faby May 29 '14 at 22:11
  • 2
    The first line, `Array[0]`, is already suspicious. It means the array has no elements. Maybe you are victim of [Is Chrome's JavaScript console lazy about evaluating arrays?](http://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays). This would also happen if the array is populated by an Ajax call but you are logging and accessing it before the response is received. – Felix Kling May 29 '14 at 22:11
  • Might be a timing issue. `console` functions are notorious for displaying the state of object not when the function is called, but when it is expanded in developer tools. – Mchl May 29 '14 at 22:12
  • check this post - http://stackoverflow.com/questions/11954152/whats-the-difference-between-console-dir-and-console-log – Nitish Dhar May 29 '14 at 22:12
  • And where does `data` come from? And where are you logging the array? – Felix Kling May 29 '14 at 22:14
  • My money's on the old *"ajax is async"* issue. –  May 29 '14 at 22:15
  • Yeah, you probably want to have a look at [Why is my variable undefined after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-undefined-after-i-modify-it-inside-of-a-function-asynchron) – Felix Kling May 29 '14 at 22:16
  • I've edited the OP for the first three. This is from the draw function, which is called after the update function and that can ONLY be called after the update function is finished. I attempted the array[0].toString() method but it complains about attempting to call it on an undefined object. I know I'm doing canvas wrong, but that's going to be fixed once I have the net code running. I am updating the OP (under edit2) with my update/draw function. – Harry Torry May 29 '14 at 22:16
  • I don't see where `drawGame` is called, but `hiderGameClient.net.getAllPlayerData` is clearly an async function, so that's your problem. You are trying to access the array before it has data. The fact that `console.log` still shows elements is because of how the console works. *edit:* Yep, you see, at the moment you are calling `this.drawGame`, the array was not populated yet. See http://stackoverflow.com/questions/23667086/why-is-my-variable-undefined-after-i-modify-it-inside-of-a-function-asynchron for an explanation and solutions. – Felix Kling May 29 '14 at 22:19
  • I wanted it async due to there being multiple requests similar to this at once, but I thought the updateGame function would block until the async requests had finished. Any tips on what to do? – Harry Torry May 29 '14 at 22:26

0 Answers0