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]

Could you show the code where you actually use console.dir? And the code where you add values? — Karl Knechtel
– Karl Knechtel, Commented Jun 15, 2011 at 9:08
I think the problem is somewhere in // code to add values goes here //. — Felix Kling
– Felix Kling, Commented Jun 15, 2011 at 9:08
if i go sectors[0].length it throws an error, it's just the way console.dir displays the data — MattBH
– 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
– RobG, Commented Jun 15, 2011 at 9:25

Felix Kling · Accepted Answer · 2011-06-15 09:53:00Z

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

edited Jun 15, 2011 at 9:53

answered Jun 15, 2011 at 9:17

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

5 Comments

MattBH Over a year ago

but i'm calling console.dir before i try to loop through the array, and the console.dir has data.

Felix Kling Over a year ago

@MattBH: I'm not sure about that one. But you can see that it prints Array[0] where it should be Array[2]. Fact is that the for loop will be run before the response is received.

MattBH Over a year ago

if you look a bit further down you can see the length property is = 2

Felix Kling Over a year ago

@Matt: I know. Maybe the values are fetched by the time you click on that little marker to list the properties of the object and not when you actually call console.dir. And when you click it, the Ajax call most likely already returned.

MattBH Over a year ago

I don't know how or why but you are right. I was wrong. Thanks a million!

KooiInc · Accepted Answer · 2011-06-15 09:08:05Z

1

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.

answered Jun 15, 2011 at 9:08

KooiInc

124k32 gold badges145 silver badges181 bronze badges

2 Comments

MattBH Over a year ago

i've pasted the code to add the values into the question.But it's not even getting into the for loop

KooiInc Over a year ago

Ok, I see you've got an answer. I was too occupied with work to look further, sorry.

venimus · Accepted Answer · 2011-06-15 09:18:10Z

0

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

answered Jun 15, 2011 at 9:18

venimus

6,1372 gold badges32 silver badges41 bronze badges

3 Comments

Felix Kling Over a year ago

As long as sectors is in the same or a higher scope it is fine.

MattBH Over a year ago

that's a copy paste of the code, sectors is declared and initialized before the function call

venimus Over a year ago

however Felix Kling got the answer, i thought it might be out of scope but it is actually out of synch.

RobG · Accepted Answer · 2011-06-15 09:26:56Z

0

Shouldn't the following:

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

be

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

answered Jun 15, 2011 at 9:26

RobG

148k32 gold badges180 silver badges216 bronze badges

Collectives™ on Stack Overflow

Javascript array not returning the correct length

4 Answers 4

5 Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related