Value Was Evaluated Just Now with Console.Log on JavaScript Object

Weird behavior with objects & console.log

Examining objects via console.log happens in an asynchronous manner. The console receives a reference to the object synchronously, but does not display the properties of the object until it is expanded (in some cases, depending on the browser and whether you have dev tools open when the log happens). If the object has been modified before examining it in the console, the data shown will have the updated values.

For example, Chrome will show a little i in a box which, when hovered, says:

Object value at left was snapshotted when logged, value below was evaluated just now.

to let you know what you're looking at.

One trick for logging in these cases is to log the individual values:

console.log(obj.foo, obj.bar, obj.baz);

Or JSON encode the object reference:

console.log(JSON.stringify(obj));

Value arriving late? “Value below was evaluated just now”

results = await axios.all(arr) contains functions that gives me the responses to the API call.

Yes, but that's pointless. You don't want functions that return promises for responses, and there's no use to call axios.all on array of functions or await that.

You will instead need to build an array of promises, and all() and await that.

You shouldn't need to use then either. You can simplify your code a lot:

async function getData() {
  const getProject = await axios.get('url', {
    auth: {
      username: 'username',
      password: 'pw'
    }
  });

  const projects = getProject.data.value;
  const promises = projects.map(project =>
    axios.get(`url`, {
      auth: {
        username: 'username',
        password: 'pw'
      }
    })
  );

  const results = await axios.all(promises)

  const KPIs = results.map(v => v.data.value);
}

console.log is not showing correct values

What you have here is a promise, which will return you values asynchronously(i.e out of the flow of execution). The correct way to handle this is as follows:

promiseObj.then(function(value){//you're code here})

When i was staring out this here helped me understand promises.

http://andyshora.com/promises-angularjs-explained-as-cartoon.html

Hope this helps,
Cheers!

Can't access object property, even though it shows up in a console log

The output of console.log(anObject) is misleading; the state of the object displayed is only resolved when you expand the Object tree displayed in the console, by clicking on >. It is not the state of the object when you console.log'd the object.

Instead, try console.log(Object.keys(config)), or even console.log(JSON.stringify(config)) and you will see the keys, or the state of the object at the time you called console.log.

You will (usually) find the keys are being added after your console.log call.

Why is this object changing before the function is run?

Please, hover on the icon with i letter on it near your log.

You will see, that Chrome (if you using Chrome, of course) will say:

Value below was evaluated just now

It happens because objects and other complex entities are being passed by reference, not by value. So, when you are expanding you log, browser getting up-to-date value of the reference.

Try to console.log copy of your value (e.g. console.log({...myObj})), or use JSON.stringify or other string-like representation of your object.

---

Note, that it is not error in your code. It is just a feature of the console.log, so (if I interpreted it correctly) your code works just fine :)

Display current object value console log

The values in the red box are values when the console.log was called. Green ones are the values after the Object in your console was clicked. If you have a loop, then calling console.log each time in end of the loop will give you the latest values always. If you want only the final value, then after your loop or calculations have ended and the values wont be modified again, call console.log on the object and it will give you the final values.

---

Related Topics