1

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

Improve this question
4
  • Its funny, because .j.markers is exactly the same as .j.j Commented Jul 25, 2014 at 21:56
  • directionsRenderer.j.markers is undefined. directionsRenderer.j and directionsRenderer.markers are what your picture shows. Commented Jul 25, 2014 at 21:57
  • directionsRenderer.markers is undefined. Commented Jul 25, 2014 at 22:01
  • I'd upvote the question again if I could: It's so nice to see someone post a question and stick around to answer questions, do further experiments, etc., etc. The question as it stands deserves more votes than it's gotten; the effort and attention only reinforces that. Commented Jul 25, 2014 at 22:10

1 Answer 1

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I cannot stringify it, because its a circular structure. But your explanation seems logical.
@UrosHercog: A pleasure to help someone who takes the time to help themselves.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.