Skip to content
Advertisement

Javascript dictionary keys not updating within an axios request

I currently have the following code in my app:

JavaScript

Where getUserData and getTestData interact w/ my external API. The getTestData endpoint returns something like

{success: True/False, json: {String key: {time: UNIX time, value: float}}}

After running this, I would thus expect testData to look like

{CM10: [{x: time, y: value}]} for each value and time received in the API call.

When running

JavaScript

though, instead of getting the expected dictionary, the console.log prints

Unaccessible data

console.log(testData[CM10]) also prints undefined, and testData.values are also empty.

Just for contrast, when I initialize testData outside of the function w/

JavaScript

And then run the same code, the output is

enter image description here

And running console.log(testData["CM10"])" prints 10

Why is this, and what can I do to fix it?

Advertisement

Answer

Dont rely on console.log ….

When you call populateTestData it returns the value response, which is {} (not sure how/why {} is showing in console.)

In the mean time, there were two api calls made. Now the response is filled with value at the background. So it shows as if data is present while you expand. But actually the data is filled after .then is called. When you collapse it shows {}, the initial received response

To confirm

JavaScript

This is very common tricky thing with console. You need to apply promise to avoid these.

Also I see you are running a loop. Javascript is an asynchronous code. So the for loop keeps executing and does not wait for the result. In this case, you would use async function

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

Could not reproduce your code with valid values, but below link will be helpful to you.

Promise All with Axios

Note: If you dont have a for loop inside, getTestData, or if you can mock with you can confirm axios responses with promise

JavaScript
Advertisement