Javascript array not returning the correct length

Question

This is probably something really stupid but for the life of me i can't see it.

I have code that fills an array with strings and ii then want to loop through the array and add the values to as options in a select control. But for some reason when i call the length property it returns 0, but if i use console.dir to display the array in the console it has data in it.

here's the code:

var sectors = new Array();
// code to add values 
$.getJSON("get/tech_info.php", {uid:json.uid}, function(data){

    $.each(data, function(i, json){
        if($.inArray(json.area, sectors) == -1)
        {
            sectors[sectors.length] = json.area;
        }
    });
});


console.dir(sectors);

var sec = "#mainSectors" + count;
console.log(sectors.length); // returning 0
for ( var i=0; i != sectors.length; i++ ){

    console.log("bla bla bla");
    $(sec).append(
        $("<option></option>").html(sectors[i])
    );
}

Here's the cosole.dir data which you can see has data:

//secotrs
Array[0]
0: "Industrial"
1: "Commercial"
length: 2
__proto__: Array[0]

Answer 1

You are making an Ajax call. Ajax is asynchronous ! The code after the call (the for loop) is run before the callback executed (and the array is populated).

Put all the code that depends on sectors in the callback:

var sectors = [];

$.getJSON("get/tech_info.php", {uid:json.uid}, function(data){

    $.each(data, function(i, json){
        if($.inArray(json.area, sectors) == -1)
        {
            sectors.push(json.area);
        }
    });

    var sec = "#mainSectors" + count;
    console.log(sectors.length); //
    for ( var i=0; i != sectors.length; i++ ){

        console.log("bla bla bla");
        $(sec).append(
            $("<option></option>").html(sectors[i])
        );
    }

});

---

Update:

Regarding the output of console.dir : It is as I assumed. The properties of the object are fetched when you expand the entry in the console, not when you make the call.

Example:

> a = [];
  []
> console.dir(a)
  ▸ Array[0]
    undefined
> a.push(5)
  1

When I now click the marker next to Array[0] , I get:

▾ Array[0]
   0: 5
   length: 1
  ▸ __proto__: Array[0]

where one would expect that it does not show 0: 5 as it was added later (after the console.dir call).

Answer 2

You are showing the length property (with console.log ) before something is added to the array, so I suppose 0 is the right length there. After that, you are looping an empty array.

Furthermore, should sectors have length , then for ( var i=0; i != sectors.length; i++ ) can run endless, because it skips i when it's not sectors.length and moves on. Use i<sectors.length .

Answer 3

i suppose for this line sectors[sectors.length] = json.area; sectors is out of the scope var sectors = new Array(); should be in the main scope outside any function

Answer 4

Shouldn't the following:

  if($.inArray(json.area, sectors) == -1)

be

  if($.inArray(json.area, sectors) != -1)