for in loop - what is contained in the variable - javascript

Question

I worked a lot with PHP and now I am slowly learning javascript. I am working on setting the zIndex for some google map markers. I am using a for in loop. I would expect the variable "i" to contain a number that I can use to set the zIndex, but if I do, it breaks the code and the markers do not show up on the map. If I use numbers, the code works. If I feed a number into a variable and use that variable, the code also works. So I can make this work, but I would like to understand why using the i variable is not working. When I output the i into a div - it shows numbers 1,2,3,4,5,6,7...

for (var i in data.results) { 
    var myLatlng = new google.maps.LatLng(data.results[i].latitude,data.results[i].longitude);

    markers[i] = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,
        {
            color:"bbbbbb",
            text:data.results[i].id
        }),
        position:myLatlng,
        zIndex: 1,                             
        map:map
    });

    google.maps.event.addListener(markers[i], 'mouseover', function ()
    {
        this.setOptions({zIndex:100});
    });
    google.maps.event.addListener(markers[i], 'mouseout', function ()
    {
        this.setOptions({zIndex:1});
    });
}

score 0 · Answer 1 · answered Mar 12 '14 at 02:43

0

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

You are looping through properties in data.results.

answered Mar 12 '14 at 02:43

edhedges

2,722
2
28
61

I understand what you are saying edhedges. So how come it works in all the other variables in the code, like data.results[i].latitude, data.results[i].longitude, markers[i] and it also prints numbers? – Mar 12 '14 at 02:46
I don't know what kind of data any of your objects have in them. I linked documentation for the syntax you are using. It's not difficult just read about it. When using `for...in` you are traversing over an objects properties. You can read more about it here: http://stackoverflow.com/a/3010848/1165441 – edhedges Mar 12 '14 at 02:49

score 0 · Answer 2 · answered Mar 12 '14 at 02:44

0

A for in loop will loop through the keys of data.results. If you are looking to use the i as an index, you should use a regular for loop, such as follows:

for (var i = 0; i < data.results.length; i++) {
  // some code using data.results[i];
}

answered Mar 12 '14 at 02:44

jontewks

458
3
7

I understand what you are saying jontewks and I will use a loop like what you suggested, but how come it works in all the other variables in the code, like data.results[i].latitude, data.results[i].longitude, markers[i] and it also prints numbers? – Mar 12 '14 at 02:50

score 0 · Accepted Answer · answered Mar 12 '14 at 03:51

Hopefully this is the type of explanation you're looking for:

When you use the for-in loop, you get the keys of the object [just like the other answers say]. The difference between these keys and the integer indices of the regular for loop is that the object keys are always of type string.

If you run this simple loop:

var test = {
    1: 'a',
    2: 'b',
    3: 'c'
}

for (var i in test) {
    console.log(typeof i, i);
}

You will get the following output:

string 1
string 2
string 3

As you are not new to programming, you probably know you need an integer to use for the index of an array, which is the data type of data.results i assume.

Here is a Fiddle in case you need it.

Hopefully this is helpful!

for in loop - what is contained in the variable - javascript

3 Answers3