Angular cant read object in array

Question

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.

i've noticed recently that when you call console.log($scope.items) it's logging by reference but when you do console.log($scope.items[0]) it's logging by value, try and do console.log(angular.copy($scope.items)) — maurycy
– maurycy, Commented Mar 12, 2015 at 11:54
i forget to mention i first copy the object with $scope.items = angular.copy($scope.other); — 77120
– 77120, Commented Mar 12, 2015 at 11:56
I've made working plunker for you plnkr.co/edit/QPB2JW8OAA4TiLgH1g6j?p=preview in this plunker I use $http in success method I alter the object and then in finally i console.log it and it will ALWAYS be in correct format — maurycy
– maurycy, Commented Mar 12, 2015 at 12:16

Laxmikant Dange · Accepted Answer · 2015-03-12 12:11:17Z

2

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,

edited Mar 12, 2015 at 12:11

answered Mar 12, 2015 at 12:05

Laxmikant Dange

7,7386 gold badges43 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

77120 Over a year ago

oke thanks, but i need to use the population value. and it says Cannot read property 'population' of undefined.

Laxmikant Dange Over a year ago

your population property is not in that object when you are using console.log

Laxmikant Dange Over a year ago

Are you using http call or local storage??

77120 Over a year ago

$http.get inside a foreach, and i also tried to runs the console.logs after the foreach is done

Laxmikant Dange Over a year ago

Then your value gets updated not after your foreach loop, that value gets updated after completion of ajax call which might be in success() or error(). Try to log in success method, you will get your result. you can try promise, but you need to use it as per your logic

|

maurycy · Accepted Answer · 2015-03-12 12:42:29Z

1

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)
  })

answered Mar 12, 2015 at 12:42

maurycy

8,4201 gold badge30 silver badges44 bronze badges

Comments

vikas · Accepted Answer · 2015-03-12 11:58:55Z

-1

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.

answered Mar 12, 2015 at 11:58

vikas

1,5581 gold badge14 silver badges22 bronze badges

2 Comments

vikas Over a year ago

there can be events and async operations which can alter the objects even if there is no code between them. And have you checked the results after stringify the objects in console?

77120 Over a year ago

i did now, results are the same

Collectives™ on Stack Overflow

Angular cant read object in array

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related