Array.from returns empty array

Question

I am trying to filter children of an div element.

I get direct access to the parent div via Angular ViewChild and if I print the children like this

console.log(this.myParentDiv.nativeElement.children);

I get the following output in Chrome:

I need to convert this to array to be able to filter the divs. However if I convert it like this

console.log(Array.from(this.myParentDiv.nativeElement.children));

It returns an empty array.

Any idea why it returns empty?

Because the collection is actually empty. See http://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays — JJJ, Mar 28 '17 at 10:34
Something should be wrong in your code. Just try to do this: `Array.from(document.body.children)` on this SO Q&A from the debugger console and see that it works.. — Matías Fidemraizer, Mar 28 '17 at 10:34
Did you notice `HTMLCollection[0]` ? The subscript `0` shows that the collection is actually empty. What you are seeing in console are the values which got evaluated later on. Maybe the values were not there initially and you are updating the collection dynamically — abhishekkannojia, Mar 28 '17 at 10:36
Ok, I added a delay making sure the elements were actually rendered before calling the Array.from and it works correctly now — doorman, Mar 28 '17 at 10:39
@MesutÇifci it's been a while but it seems I added a delay before calling the array action.. so try to use setInterval — doorman, Mar 03 '21 at 16:11

score 0 · Answer 1 · answered Nov 20 '21 at 19:39

0

I think the problem in this case is that the Javascript code is being executed before the html document is ready.

Move your JS code or import to the bottom of the page and the problem should be fixed.

answered Nov 20 '21 at 19:39

Daniel Nwokocha

31
2

score -1 · Answer 2 · answered Jul 22 '22 at 09:55

Not the fanciest solution but in order to achieve this I wrapped the logic into a timeout function:

setTimeout(() => {
  const elementChildren = this.myParentDiv.nativeElement.children;
        
  // regular for loop
  for (let i = 0; i < elementChildren.length; i++) {
    console.log(">>",elementChildren[i]);
  }              
}, 100);

Array.from returns empty array

2 Answers2