Array.Length Is Zero, But the Array Has Elements in It

array.length is zero, but the array has elements in it

readdir is asynchronous. It won't get the results right away. You should use the filePaths inside the callback. The only reason why the console shows the value is because the console evaluates the array when you unfold it.

When you press the little arrow on the left, put the mouse on the i box on the right. What happens is that the console keeps a reference to the array, so when the user unfolds the array it then shows the current value of the array. But when you log filePaths.length the array is empty because readdir didn't finish reading yet, that's why you get 0. But by the time you open the console and press that arrow, readdir will have already done reading and the console will print the current value of the array (after it's been filled).

Example to demonstrate the problem: (not a solution, it's just to understand what is really happening)

Open the browser console and try this code and see what happens:

var arr = [];

setTimeout(function() {
  arr.push(1, 2, 3);
}, 5000);

console.log(arr.length);

console.log(arr);

Here the array and it's length are both logged before the array is filled. The array will be filled after 5 seconds. So the output will be 0 and a string representation of the array array[]. Now because arrays could have tons of data, the console won't show that data until the user unfolds the array. So what the console does is keep a reference to the array until the user press the unfold arrow. If you unfold the array before 5 seconds you'll see that the array is empty (not filled yet). If you wait until the 5 seconds pass then unfold it, then you'll see that it's filled, even though it was logged as an empty array.

Note: Also, the line that get logged to the console (something like > Array(0)) is just a string representation of the object/array at the moment the log happens. It won't get updated if the object/array changes. So that also may seem confusing sometimes.

I hope it's clear now.

Array length is zero but has accessible elements

This has nothing to do with react, it's simply that on the inside array is still an instance of an object and can have it's properties modified the same way, without actually adding them to the iterable options.

Example here:

const array = [];

array.ort = "test";

console.log(array); // []
console.log(array.length); // 0
console.log(array.ort); // "test"

Array length is showing zero even though array is not empty

This is happening because you are not awaiting the service. What happens is that the data has not come from the server and u are console logging its value.

let fetchData=async (params:any)=>{
    this.booksInCheckout = await this.checkoutService.getCheckoutBooks();// getting array value service
    //other code here
}

async function fetchData( params:any)=>{
    this.booksInCheckout = await this.checkoutService.getCheckoutBooks();// getting array value service
    //other code here
}

use one of the below mentioned function implementation for your service.

//code for service 
 function getCheckoutBooks(){
return http.get();
}

 
async function getCheckoutBooks(){
const booksData : any = await http.get();

return booksData;
}

The following code should work.

ngOnInit() {
   this.checkoutService.getCheckoutBooks().subscribe((booksInCheckout)=>{
    console.log(booksInCheckout); // for array
    console.log(booksInCheckout.length); // for length of array
    console.log(booksInCheckout[0]); // for first element
  
  });

}

You are facing this problem beacuse you are calling an asynchronous function but due to the asynchronous nature of javascript, the code below the function gets executed before the asynchronous task completes.

So here i have added a callback for the asynchronous task. Hope it helps :)

Javascript array has data but length is zero

What you return from read file is a promise so you should read the resolved value inside then method like this

 readFile().then( (scenes) => {
     console.table(scenes)
 }

The reason you could see values in console is because when using console.log in Chrome and Firefox it is a live version of the object that might be changed from later code (from promise resolve).

If you want to print state of object in time you can run console.log(JSON.stringify(obj))
Here is a snippet from MDN

Please be warned that if you log objects in the latest versions of
Chrome and Firefox what you get logged on the console is a reference
to the object, which is not necessarily the 'value' of the object at
the moment in time you call console.log(), but it is the value of the
object at the moment you click it open.

Array shows 0 as length when it has elements in it

This is a timing issue. The first time you ask for the length it is indeed 0, but when you inspect the object a few seconds later with Chrome Dev Tools you are inspecting the live object which has now been filled.

You can confirm this by using setTimeout

setTimeout(function(){
    console.log(this.$.slide.length);
}, 1000)

Sounds like the ready event isn't working the way you expected.

Update

To solve your problem of setting with photo widths without glitching, you can use setTimeout 0 to defer the execution. JS is single threaded and this will let the rendering finish before setting the width

// `0` will 'defer'
setTimeout(this.setSlideDimensions.bind(this), 0);
setTimeout(this.setThumbDimensions.bind(this), 0);

Some people frown upon doing this as it can be a sign of bad logic, but without more knowledge of how Vue.js works, I would say this would be your best solution for now.

Updated jsFiddle

Array has elements on it but its length is zero

If you are using the returned value then the issue is axios takes time to fetch the data from the API, but in the meantime control moves forward and executes the return statement at which point the value of questions is []. I would suggest using async await syntax instead of then() callback. You simply await for the response from the API and when the response is received the only you return the response from the function.

Array has records but showing array length 0 in console

This is related to Chrome dev tools. You see the little "i" in a blue square next to "[]"? If you hover it with your mouse, it says "value below was evaluated just now". It means that at the time you logged your array (which is actually a javascript Object), it was empty, but later Chrome detected a change, and updated the array in the console.

(And that is only if you expand it using the little arrow, you can see the array was empty at the time it was logged since it looks like this "[]", otherwise it would have looked like this "[{...}]").

Chrome updates object when you log them, but not simple values. Array.length is a number, so when you log it, it gives you its value (0), and if Array.length changes later, it will not update the console; but if you log it after the change (as with your timeout), it will log the more recent value.

My array is not empty but array.length returns 0

When you output an object with console.log its state may evolve and you are not necessarily seeing the state of this object at the time console.log was called but only at the time it was expanded in the console view. Which is not the case with primitives.
Most probable scenario: when calling console.log the array was empty, with a length of 0. When you expand the Array log in the console view you will see it populated even if it was not at the time it was logged.

---

Related Topics