Javascript/Loopback - array.length returns 0

Question

I am using loopback to read list/array of customers. I stored customer array in $scope.customers.customerList. When I first log, the array seems fine but when I get its length, it seems to get lost because it returns 0. Why is that happen?

Here is my code:

    $scope.customers = { customerList: [] };

    var filter = {
           include: {
              relation: 'orders'
           }
    };

    $scope.customers.customerList = Customers.find({filter: filter});
    console.log($scope.customers.customerList);          //outputs array with length 21
    console.log($scope.customers.customerList.length);   //array length is 0

Link: screenshot of the output

Seems to be that 0 is a valid value, and certainly possible given your code, e.g. if the filter yeilds zero results. — John Wu, Feb 19 '17 at 12:45
It's possible the array is being modified after `console.log()` is called. The Dev Tool's Console is showing you the value as of when you look at it – "[*console.log() shows the changed value of a variable before the value actually changes*](https://stackoverflow.com/questions/11284663/console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-ch)." The `length` doesn't do the same because the number read from it is immutable. You might try `console.dir()` instead. — Jonathan Lonowski, Feb 19 '17 at 13:26
Possible duplicate of [console.log() shows the changed value of a variable before the value actually changes](http://stackoverflow.com/questions/11284663/console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-ch) — Farid Nouri Neshat, Feb 19 '17 at 17:14

score 1 · Answer 1 · edited May 23 '17 at 12:09

It's exactly what Jonathan Lonowski has described. Customers.find which is created by ngResource returns an empty array initially and when data is loaded it updates it. By the time the Browser console prints it or when you open it, the results are already there.

From Angular docs:

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.

nidhin · Answer 2 · 2017-02-20T07:12:07.903

Use the find method with callback function.

      $scope.customers = { customerList: [] };

var filter = {
       include: {
          relation: 'orders'
       }
};

Customers.find({filter: filter},function(customerList){
$scope.customers.customerList=customerList;

   console.log($scope.customers.customerList);          //outputs array with length 21
console.log($scope.customers.customerList.length); 
},function(error){

});

score 0 · Answer 3 · answered Feb 20 '17 at 18:33

The find method in loopback accepts a callback and returns a promise. you can use either.

//callback
Customers.find({filter: filter}, function (err, customerList) {
  $scope.customers.customerList = customerList;
});

//Promise
Customers.find({filter: filter}).then(function(customerList) {
  //customerList is an array
  $scope.customers.customerList = customerList;
});

You can see in your output that the promise was resolved and gave the 21 elements. The length was 0 because the promise was not resolved at that point.

Javascript/Loopback - array.length returns 0

3 Answers3