Access value from a JavaScript map only possible from DevTools

Question

So I'm trying to access values in an array returned from a third=party service (Twilio) and I can get exactly what I need when I place

room.participants.forEach(function(participant){
    console.log(Array.from(participant.tracks));
});

In Dev Tools, I receive:

(2) [Array(2), Array(2)]
0: (2) ["f469c8e5-4f94-4752-b018-af02d32fe448", AudioTrack]
1: (2) ["be6c2aa6-4c7c-4431-a964-a711f000562a", VideoTrack]
length :2
__proto__ : Array(0)

But the same code in my script produces [] as a result. This isn't an issue of timing, because I am able to console.log both room.participants as well as the map of the individual tracks by using

var myKeys = room.participants.keys();
console.log(myKeys); 
var myParticipant = room.participants.get(myKeys.next().value);
console.log(myParticipant);
console.log(myParticipant.audioTracks);
console.log(myParticipant.videoTracks);

But as soon as I attempt to access the values of the tracks through the same methods foo.next().value I receive an empty map and if I try the Array.from() method I receive an empty array.
What is going on?!

spanky · Accepted Answer · 2017-08-29 21:48:01Z

1

console.log() will give you a real-time view of the object you're logging, so if it is a timing issue, then by the time you look at the console, the objects you're logging will have been updated.

So the solution in that case would lie in how exactly the data is being populated.

answered Aug 29, 2017 at 21:48

spanky

2,86010 silver badges9 bronze badges

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

4 Comments

K. Rhoda Over a year ago

But when I log out myParticipant in my code, I can see the the .tracks map which has the data I need. Why can't I call Array.from(myParticipant.tracks.values) and receive something other than an empty array?

K. Rhoda Over a year ago

The log of myParticipant looks like

tracks : Map(2) {"f469c8e5-4f94-4752-b018-af02d32fe448" => AudioTrack, "be6c2aa6-4c7c-4431-a964-a711f000562a" => VideoTrack}

<br>logging (in my code) myParticipant.tracks looks like

Map(0) {} size:(...) __proto__:Map[[Entries]]:Array(2) 0:{"f469c8e5-4f94-4752-b018-af02d32fe448" => AudioTrack} 1:{"be6c2aa6-4c7c-4431-a964-a711f000562a" => VideoTrack} length:2

spanky Over a year ago

You say it's not a matter of timing, but then you say that if you log room.participants in the dev tools, you get the data. Well aren't you doing the logging after your code has had a chance to run? If so, then why do you insist that it isn't timing related?

K. Rhoda Over a year ago

Because I'm silly. It turns out that if I called it later, it would work. I don't understand why I can "see" the values I need from the logs produced by the script but not access them until later, but that's the case. I've accepted your answer, thanks!

Collectives™ on Stack Overflow

Access value from a JavaScript map only possible from DevTools

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related