0

I am trying to update a JavaScript window object in JavaScript that gets triggered as part of WebSockets.

Here is my code:

addData(data) {
// window.chart.data.datasets.forEach((dataset) => {
//   dataset.data.push(data);
// });
console.log(data)
console.log(window.chart.data.datasets[0].data)
window.chart.data.datasets[0].data.push(data)
console.log('-----------------')
console.log(window.chart.data.datasets[0].data)
console.log('-----------------')
window.chart.update();
}

I'm using JavaScript chart.js library. I will explain the lines one by one:

  1. console.log(data) logs the json data back from the server. In the attached image you can see it is {x: 47, y: 0.61, id: 31049}
  2. console.log(window.chart.data.datasets[0].data) logs the original state of the data attribute of datasets[0]. In the log below, you can see it has 2 elements and log is prefixed with "(2)"
  3. Then I do a push to JavaScript array stored in ...datasets[0].data
  4. Then I do the same log in step 2 above after I've pushed the Json from step #1 to the data attribute in step #2. This log shows the prefix of "(3)", which seems fine, but there are only 2 original elements and not 3. This is confusing.
  5. If I do the same steps manually from browser console, it all works fine. So it doesn't seem like there is anything wrong with the code.

Why isn't my json from step 1 is getting pushed to the array referenced by the data attribute of datasets[0] when done through the WebSockets?

enter image description here

Nat Riddle
  • 928
  • 1
  • 10
  • 24
user1801879
  • 812
  • 2
  • 9
  • 21
  • It is, in fact, being pushed. Log the JSON representation of the array. The inspector gets the latest copy of the array when expanded – 0xLogN Apr 05 '21 at 15:16
  • 1
    See the answers to the [linked question](http://stackoverflow.com/questions/38660832/element-children-has-elements-but-returns-empty-htmlcollection). When you log an object, the console keeps a live reference to that object. When you expand the object in the console, it shows you the object as it is *when you do that*, **not** as it was *when you logged it*. This trips people up all the time. Instead of stumbling around in the dark with a `console.log` torch, I suggest *turning on the lights* using the debugger built into your IDE and/or browser. :-) – T.J. Crowder Apr 05 '21 at 15:17
  • @T.J.Crowder Wouldn't that mean that json from server would always show up when I expand the object in the console? But it is not there. Also I send multiple JSONs from the server, the log should then always show the subsequent ones as well but it doesn't. If you see the original value of x from server is 47, but log elements do not have an element with that value. Maybe it is being pushed and then getting reset for some reason? But I don't have any code to reset it. – user1801879 Apr 05 '21 at 15:20
  • @user1801879 - No, it means you're seeing what's there **as of when you expand the object**, as I said above. Again, the debugger is your friend, because it stops things so you can see them as they are when a statement is about to run, so you don't have that problem. – T.J. Crowder Apr 05 '21 at 15:27
  • @T.J.Crowder I believe at the time it is being logged, the array does have 3 elements, hence the prefix of 3, but the live array only has 2 elements, for some reason it is losing that third element – user1801879 Apr 05 '21 at 15:27
  • Right. It's not "losing" it, some code somewhere is removing it after the array is logged. Arrays aren't unreliable. – T.J. Crowder Apr 05 '21 at 15:28

0 Answers0