CODEWITHSUNDEEP
javascriptgoogle-maps
user2543382
user2543382

Reputation:

Javascript array element undefined, it really isn't

can someone explain this to me. The image below depicts the output in the Chrome console. When I log out the main object, the console shows all the properties. As you can see the array has a property named "markers", its not undefined, because I can browse through it. But when I try to log out this property, lets say object.markers, it says that the property is undefined. Now I am really confused, because as you can see I log them sequentially.

First object is directionsRenderer. The second object is 'j' property of directionsRenderer. Third is 'markers' property of directionsRenderer 'j' property.

enter image description here

Here is the source enter image description here

Upvotes: 1

Views: 66

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1073988

I bet what we're seeing here is the surprising way that the console works in Chrome.

In Chrome, when you "log" an object, you don't just get the object as it was when it was logged. You get a live interaction with that object. The first time you expand that object, you see a list of its properties as of when you expand it, not as they were when it was logged.

I suspect if you do

console.log(JSON.stringify(directionsRenderer));

...you'll see that .j.markers is indeed undefined, because it's been filled in later, asynchronously, after the code you've shown has run.

You can see this effect if you do this: Live Copy

var a = {b: {}};
console.log(a); // Note that b is currently empty
setTimeout(function() {
    a.b.c = "foo";
    var p = document.createElement('p');
    p.innerHTML = "Now expand <code>a.b</code> in the console";
    document.body.appendChild(p);
});

Note that we log a when a.b is empty, then after we log it, we add a property to b. When you expand a in the console, you see b with the c property.

E.g., what you have is a timing problem. There's some asynchronous call involved, and you need to find the callback associated with it before you can access directionsRenderer.j.markers.

Upvotes: 3

Related Questions