0

I have an array that is for unacessable by index like this: myArr[index]. after logging my array in Dev tools i get the following output that looks like an empty array

my array looks like this

however after expanding the array i get the following:

expanded array

which is a populated array but with 0 length

is there an explanation for this and how can i be able to access the items in the array?

i'm using a vadeen grid to display a set of data in a polymer app

      <vaadin-grid selection-mode="multi" items="{{households}}" id="simple">
    <table>
      <colgroup>
        <col name="$key" sortable/>
      </colgroup>
    </table>
  </vaadin-grid>

the data is bound to the grid using a firebase query element.. it works fine(i reduced some attributes from the code)

  <firebase-query
    id="query"
    data="{{households}}"
>

the problem happens when i try to add buttons just like they did in thislink

just for testing i added these three lines of code

      var grid = this.$.simple;

      console.log('length '+grid.columns.length);
      console.log(grid.columns);
      console.log(grid.columns[2]);

here's the output from these three lines enter image description here

as you can see the printed size is 0 but the one displayed at the console is 6(i have no idea why this happens). as far as i know a populated array with 6 elements should look like Array[6] instead of Array[0] and should be displayed as [Object, Object .....] instead of []but i dont quite get what i'm missing here.

Osvaldo Maria
  • 340
  • 5
  • 14
  • 3
    1) Provide code that shows your problem. 2) You don't access elements of an array using `(index)`. It should be `[index]`. – Mike Cluck Jan 12 '17 at 17:50
  • 2
    How you think with 0 length ? Image says that `length` is 6, and it's seems to be correct – Belmin Bedak Jan 12 '17 at 17:52
  • sorry, i have updated my question with square brackets instead of parenthesis. the output array above is from `console.log(grid.columns);` but i get undefined when i try to use `console.log(grid.columns[2]);` – Osvaldo Maria Jan 12 '17 at 17:56
  • 1
    But you still didn't post any relevant code. – Belmin Bedak Jan 12 '17 at 17:56
  • 1
    what does it print in the dev console when you do `myArr.length`, does it logs `6` or ? – parwatcodes Jan 12 '17 at 18:02
  • Take look at this, but I still don't know what is your code structure, so until you put whole code, we can't help you http://jsbin.com/mekiludolo/edit?html,js,console,output – Belmin Bedak Jan 12 '17 at 18:02
  • 2
    I think there is something asynchronous going on there... The `i` with the blue background says "Value below was just evaluated now". – Redu Jan 12 '17 at 18:04
  • 1
    This is an artifact of how the console displays objects, and what happens when you expand them. There are plenty of questions on the topic here on SO. –  Jan 12 '17 at 18:04
  • thanks @Redu I did not know what the `i` meant. i suspect that may be problem. it's weird that the values get updated but the length is not. – Osvaldo Maria Jan 12 '17 at 23:16
  • When the array is logged, its empty. Then, it gets updated some time after it was originally logged and before you view it in the console. This is a classic "by reference/by value" question. Google that and learn how it works in javascript. It's the most important thing to understand to master the language – Charlie Martin Jan 12 '17 at 23:17
  • i just added the code @BelminBedak – Osvaldo Maria Jan 12 '17 at 23:19
  • thanks @CharlieMartin i actually understand about asyncronous behaviour. i just had no idea that the browser console could get updated assyncrounously(which btw does not happen in the nodeJS console) which seems to be the case here. – Osvaldo Maria Jan 12 '17 at 23:32
  • 1
    by reference/by value is different than asynchronous but yes you are correct. it can't be updated in node. the browser has some code that redraws the console constantly and any value that is there by reference and has changed will reflect the changes – Charlie Martin Jan 12 '17 at 23:34
  • Each `console.log()` instruction gets invoked asynchronously so although they are placed one after the other there is no guarantee of consistency here. To guarantee a synchronized manner of log out I would advise yo to do like `console.log('length '+grid.columns.length, grid.columns, grid.columns[2]);` – Redu Jan 13 '17 at 00:13

0 Answers0