CODEWITHSUNDEEP
javascriptarraysangularjsobject
77120
77120

Reputation: 915

Angular cant read object in array

I have an array with two objects in it, assigned to $scope.items;

when i do 

console.log($scope.items)

the output is:

[
 {s: "item1", q: 3, $$hashKey: "object:3", population: Object},
 {s: "item2", q: 3, $$hashKey: "object:4", population: Object}
]

but when i do 

console.log($scope.items[0])

the output (sometimes*) is:

{s: "item1", q: 3, $$hashKey: "object:3"}

'* this does not always happen, depends on page load. when refreshing the page, the result is some times with the population and sometimes without.

the first output is always complete with the population intact. (no matter how manny times i press f5 :) )

i call the console.log at the same time. and in the same order as above.

so i dont understand when i call one of the objects directly they are incomplete?

it looks like a parsing error, but how can the first output always be complete?

Extra info the $scope.items is a copy of another array.

i use $http.get to build the object, but also tried to call the console.logs in his success functions.

the $http.get is placed inside a foreach so is called multiple times before the the complete array is complete

and i use the http.get to build the population.

i hope someone can clarify this a bit for me, how this can be possible. or howto continue to look for possibilities to find the error.

Upvotes: 1

Views: 1017

Answers (3)

maurycy
maurycy

Reputation: 8465

What you are facing is a race issue when you log value before it's processed by some method, you should get familiar with promises and $http Working example for $http and it's promises

http://plnkr.co/edit/QPB2JW8OAA4TiLgH1g6j?p=preview

$http.get()
.success(function() {
    $scope.data = [{
      s: "item1",
      q: 3,
      $$hashKey: "object:3"
    }, {
      s: "item2",
      q: 3,
      $$hashKey: "object:4"
    }]
    angular.forEach($scope.data, function(obj){
      obj.population = {}
    })
  })
  .finally(function() {
    console.log($scope.data[0].population)
  })

Upvotes: 1

Laxmikant Dange
Laxmikant Dange

Reputation: 7698

It is not the problem with angular, its feature/problem of google chrome. In google chrome, when you console any object, it shows name:object, when you expand it, it points to real time memory location, and even if that memory location is updated after console.log, it expands with updated output.

var d=[];

for(var i=0;i<100;i++){
    d[i]="val_"+i
}
console.log(d); //d[60] should be val_60 but will get value 'changed value' when you expand
console.log(d[60]); //will print 'val_60'

d[60]='changed value'

Here is a sample code which you can run in browser and you will get strange result in console.

In your case, you are printing an array, google chrome's console will point to that array's memory location. and print that array, when you try to expand that array, it will fetch mealtime information from memory and shows you current status of array.

The solution is to use debugger in chrome and inspect that variable before that variable gets change.

Another solution is to convert that array into a string using JSON.stringify,

Upvotes: 2

vikas
vikas

Reputation: 1558

It seems like after first console log some event is removing the population field from the item or may be reinitalizing the items with default values. To debug it better, please log objects with JSON.strinfigy results of the items e.g. console.log(JSON.stringify($scope.items)

Without stringify, any code/event which is altering the object would update the console logs as well.

Upvotes: -1

Related Questions