console.log(array) returns filled array, but console.log(array.length) is 0? [duplicate]

Question

I'm having trouble with an array and I cannot find what exactly is the problem.

First a function executes the following two lines in a loop:

varArray[overlapCounter] = [a, b, c];
overlapCounter++;

If I run console.log(varArray), the chrome log gives me the following:

[]

By opening the brackets this is the contents:

Array[0]
0: Array[6]
1: Array[6]
2: Array[6]
3: Array[6]
4: Array[6]
5: Array[6]
6: Array[6]
7: Array[6]
8: Array[6]
9: Array[6]
10: Array[6]
11: Array[6]
12: Array[6]
13: Array[6]
14: Array[6]
15: Array[6]
16: Array[6]
17: Array[6]
18: Array[6]
19: Array[6]
20: Array[6]
21: Array[6]
22: Array[6]
23: Array[6]
24: Array[6]
25: Array[6]
26: Array[6]
27: Array[6]
28: Array[6]
29: Array[6]
30: Array[6]
length: 31
__proto__: Array[0]

But if I run console.log(varArray.length), the value is 0, and console.log(varArray[0]) returns undefined.

Does anyone know what is going on there?

Full code:

$('#Salvar').click(function(e) {
          e.preventDefault();
          var dt_inicio_afastamento = $('#dt_inicio_afastamento').val();
          var dt_fim_afastamento = $('#dt_fim_afastamento').val();
          var observ_afastamento = $('#observ_afastamento').val();
          var id_ocorrencia = $('#id_ocorrencia').val();
          if ( dt_inicio_afastamento === "" || dt_fim_afastamento === "" || id_ocorrencia === ""){
            return swal({
                    title: 'Todos os campos são obrigatórios!', 
                    type: 'warning'
                });
          }
          else{
            function ajax2(names, dt_inicio_afastamento, dt_fim_afastamento, id_docente, observ_afastamento, id_ocorrencia){  
              $.ajax({
                url: '../engine/controllers/afastamento.php',
                data: {
                  id_afastamento  : null,
                  dt_inicio_afastamento : dt_inicio_afastamento,
                  dt_fim_afastamento : dt_fim_afastamento,
                  observ_afastamento : observ_afastamento,
                  id_ocorrencia : id_ocorrencia,
                  id_docente : id_docente,
                  action: 'create'
                },
                error: function() {
                  swal({ 
                      title: 'Erro na conexão com o servidor',
                      text :'Tente novamente em alguns segundos',
                      type: 'error'
                  });
                },
                success: function(data) {
                  //console.log(data);
                  if(data === 'true'){
                    names.css( "background-color", "lightgreen" );
                  }
                  else{
                   names.css( "background-color", "lightcoral" );
                  }
                }, //Sucesso Ajax2
                type: 'POST'
              }); //Ajax2
            }
            var overlapCounter = 0;
            var varArray = [];
            var requests = [];
            $(".cada_docente").each(function(index) {
              var names = $(this).prev();
              var id_docente = $(this).val();
              var nomeSerie = names.children('.nomeSerie').text();
              var requests = Array();
              (function(names, nomeSerie, dt_inicio_afastamento, dt_fim_afastamento, id_docente, observ_afastamento, id_ocorrencia){
                requests.push($.ajax({
                  url: '../engine/controllers/afastamento.php',
                  type: 'POST',
                  data: {
                    id_afastamento  : null,
                    dt_inicio_afastamento : dt_inicio_afastamento,
                    dt_fim_afastamento : dt_fim_afastamento,
                    observ_afastamento : observ_afastamento,
                    id_ocorrencia : id_ocorrencia,
                    id_docente : id_docente,
                    action: 'overlap'
                  },
                  success: function(data) {
                    if (data == "true"){ajax2(names, dt_inicio_afastamento, dt_fim_afastamento, id_docente, observ_afastamento, id_ocorrencia);}
                    else{
                        varArray[overlapCounter] = [names, dt_inicio_afastamento, dt_fim_afastamento, id_docente, observ_afastamento, id_ocorrencia];
                        overlapCounter++;
                    } 
                  } //Sucesso Ajax1
                })); //Ajax1
              })(names, nomeSerie, dt_inicio_afastamento, dt_fim_afastamento, id_docente, observ_afastamento, id_ocorrencia); //Ajax1 Função
            }); // Cada Docente
            var defer = $.when.apply($, requests);
            defer.done(function(){
                console.log(varArray);
                });


          } //Else dados colocados
        });

Please show the code in context. Is it asynchronous? When you log an object (including arrays), the console keeps a live reference to the object, so even if it was empty at the moment it was logged, by the time you click on it it may have been populated. The .length, however, is logged as it was at the time. — nnnnnn
– nnnnnn, Commented Mar 24, 2017 at 5:13
the full code of the function is a monster right now, but alright, i'll post it: — Ricardo Melo
– Ricardo Melo, Commented Mar 24, 2017 at 5:14
can you do console.log(varArray, varArray.length); and tell what it logs? — Yogesh Mistry
– Yogesh Mistry, Commented Mar 24, 2017 at 5:15
console.log(varArray, varArray.length); returns [] 0. when opened, there are many arrays inside the []. — Ricardo Melo
– Ricardo Melo, Commented Mar 24, 2017 at 5:17

gyre · Accepted Answer · 2017-03-24 05:18:50Z

16

Your problem is that console.log is not guaranteed to be synchronous; for object references like arrays, when you view the object's property tree you are seeing the tree as it is currently rather than as it was when you called log. Integers, on the other hand, are passed by value and thus when you log(array.length) you get the value of the length at the very instant log was called.

If you want to print the array as it as when you called log, you should first make a copy of it using array.slice() (note that this only creates a shallow copy of the array):

console.log(array.slice())

answered Mar 24, 2017 at 5:18

gyre

16.8k4 gold badges40 silver badges47 bronze badges

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

8 Comments

Ricardo Melo Over a year ago

The fact that it is inside a defer.done(function(){ console.log(varArray); }); doesnt change this behaviour?

gyre Over a year ago

No, it does not. You will have to use array.slice() as I suggested above if you want to take a snapshot of the object structure at that instant.

Ricardo Melo Over a year ago

console.log(varArray.slice()); logs even less than before :/ Now its just an empty array with length 0, before it was logging all the arrays inside as well.

gyre Over a year ago

So what are you trying to log? The updated value of the length property? You will have to view that inside the array reference when you print it.

Ricardo Melo Over a year ago

the log is just the start, I want to actually use the values inside of varArray, but I can't get the length, or the individual arrays inside varArray, apart form logging the entire thing, javascript returns anything I try to do as undefined...

|

Collectives™ on Stack Overflow

console.log(array) returns filled array, but console.log(array.length) is 0? [duplicate]

Full code:

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Full code:

1 Answer 1

8 Comments

Linked

Related