CODEWITHSUNDEEP
angularjstypescript
MalibuCusser
MalibuCusser

Reputation: 124

Why/how do the elements of this array change between the console.log calls?

I have an anuglarJS controller that calls an API via a service to return data. Ths issue is that sometimes, the data is not being updated in a directive that uses the data that is returned.

However, digging into this resulted in observing some very strange behavior. I added several console logs to debug what was happening, and discovered that the number of items in a property on the array is changing from one console call to the next.

The controller code is as follows:

 init(){
      this.ftService.getSitePromise(true).then((result: ng.IHttpPromiseCallbackArg<Site>) => {
      let ctrl = this;
      ctrl.isLoadingItems = true;
      ctrl.hideSplash = true;
      ctrl.siteReady = true;
      ctrl.curSite = result.data;
      ctrl.curSite.Items = [];
      console.log("end of header site call");
      ctrl.$timeout(function () {
         console.log(ctrl.curSite.Items);
         console.log("start get site items first call")
         ctrl.ftService.getSitePromise(false).then((result: ng.IHttpPromiseCallbackArg<Site>) => {
            console.log("return first call result.data.Items: " + result.data.Items.length);
            ctrl.curSite.Items = result.data.Items;
            ctrl.isLoadingItems = false;
            console.log("return first call ctrl.curSite.Items: " + ctrl.curSite.Items.length);
            console.log(ctrl);
            console.log(ctrl.curSite);
            console.log(ctrl.curSite.Items);
         });
      }, 200);   
   });
}

The console from this code executing, when the data isn't being shown as expected is as follows:

enter image description here

Any insight as to how this is occurring, and/or how I might correct it, would be greatly appreciated.

Upvotes: 0

Views: 60

Answers (1)

Rico Kahler
Rico Kahler

Reputation: 19202

Edit: I didn't read the comments before posting. I didn't see your problem was solved. Hopefully this may help someone else in the future??

Why/how do the elements of this array change between the console.log calls?

Objects can change in console.log calls because the deeper nested properties are accessed lazily meaning that the console will only grab them when you click the little arrow to expand the object or if they are a shallow property.

You can change this behavior by cloning the object using Object.assign though you may need to clone the object deeply (which Object.assign({}, myObj) does not.

The stackoverflow snippet console won't show the correct results. Open your chrome dev tools to see the real result.

// OPEN THE DEVELOPER TOOLS CONSOLE

let myObj = {
  shallowProp: 'some value',
  arr: ['initial value']
};

// notice that when this logs, it seems like the change to myObj happens before the log but it does not
console.log(
  'myObj initial log',
  myObj
);

// using `Object.assign` clones the object so that when expanded in the console, the value is the initial value
console.log(
  'myObj initial log with Object.assign',
  Object.assign({}, myObj)
);

// when the value is actually changed
myObj.arr = ['new value'];

// the final state
console.log('myObj after change', myObj);

Conclusion: try cloning your object before logging it the console.

Upvotes: 1

Related Questions