CODEWITHSUNDEEP
javascript
MattBH
MattBH

Reputation: 1642

Javascript array not returning the correct length

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]

Upvotes: 0

Views: 5012

Answers (4)

Felix Kling
Felix Kling

Reputation: 816384

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

Upvotes: 4

RobG
RobG

Reputation: 147373

Shouldn't the following:

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

be

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

Upvotes: 0

venimus
venimus

Reputation: 6047

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

Upvotes: 0

KooiInc
KooiInc

Reputation: 122906

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.

Upvotes: 1

Related Questions