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]

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]

• javascript

• Could you show the code where you actually use console.dir? And the code where you add values? – Karl Knechtel Commented Jun 15, 2011 at 9:08
• 5 I think the problem is somewhere in // code to add values goes here //. – Felix Kling Commented Jun 15, 2011 at 9:08
• i see that your array is multidimentional – venimus Commented Jun 15, 2011 at 9:14
• if i go sectors[0].length it throws an error, it's just the way console.dir displays the data – MattBH Commented Jun 15, 2011 at 9:17
• What is the error? If sectors[0] = "Industrial", then sectors[0].length should show 10 (the length of the string). – RobG Commented Jun 15, 2011 at 9:25

4 Answers 4

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).

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.

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

Shouldn't the following:

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

be

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