Right way to dynamically update table

Question

I am getting data over websocket every 10 seconds and i am updating the cells using this function:

agentStatSocket.onmessage = function (e) {
  data = JSON.parse(e.data);
  //console.log(typeof(data));

  for (var i = 0; i < data.length; i++) {
    var inboundTd = '#' + data[i]['id'] + '-inbound';
    var outboundTd = '#' + data[i]['id'] + '-outbound';

    if (data[i]['inboundCalls'] != 0) {
      $(inboundTd).html(data[i]['inboundCalls']);
    }

    if (data[i]['outboundCalls'] != 0) {
      $(outboundTd).html(data[i]['outboundCalls']);
    }
  }
};

This is working pretty fine. However, I see some lag with the table being updated. Currently, there are only 150 rows in the table. I do not know what will be the latency if rows will become 1000 or more.

I have the following questions:

What is the correct approach to design these kinds of tables in which data is changing very frequently? I am not using any library like react or angular. This is plain jQuery.I am using dataTables jQuery to enhance table view.

You can use handlebar js and create templates for the html. It will be a good thing to use here. — Aju John, Oct 19 '20 at 08:23

score 1 · Answer 1 · answered Oct 19 '20 at 08:59

1

One thing to consider is that, in many cases, accessing an element based on an ID is usually a lot quicker in vanilla javascript compared to jquery.

A simple example of that is:

function jsTest() {
  for (let i = 0; i < 1000; i++) {
    document.getElementById("js").innerHTML = i;
  }
}

function jqueryTest() {
  for (let i = 0; i < 1000; i++) {
    $("#jquery").html(i);
  }
}

function startup() {
  console.time("javascript");
  jsTest();
  console.timeEnd("javascript");
  console.time("jquery");
  jqueryTest();
  console.timeEnd("jquery");
}
// For testing purposes only
window.onload = startup;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Javascript: <div id="js"></div>
Jquery: <div id="jquery"></div>

So, you could try changing your code to:

agentStatSocket.onmessage = function (e) {
  data = JSON.parse(e.data);
  //console.log(typeof(data));

  for (var i = 0; i < data.length; i++) {
    //var inboundTd = '#' + data[i]['id'] + '-inbound';
    //var outboundTd = '#' + data[i]['id'] + '-outbound';
    var inboundTd = data[i]['id'] + '-inbound';
    var outboundTd = data[i]['id'] + '-outbound';

    if (data[i]['inboundCalls'] != 0) {
      //$(inboundTd).html(data[i]['inboundCalls']);
      document.getElementById(inboundTd).innerHTML = data[i]['inboundCalls'];
    }

    if (data[i]['outboundCalls'] != 0) {
      //$(outboundTd).html(data[i]['outboundCalls']);
      document.getElementById(outboundTd).innerHTML = data[i]['outboundCalls'];
    }
  }
};

You can still use jquery for the rest of your code, if you wish, but simple updates to elements that can be targeted by ID are usually quicker with vanilla javascript.

answered Oct 19 '20 at 08:59

ATD

1,344
1
4
8

Upvoted !. I didn't know that but i have a hunch that handlebar js will be a good alternative here as mentioned by @AjuJohn in the comments. I am experiencing one more problem that some of the table cells are not being updated though the code is right and i am getting the right data in websocket message. I donot know why this code is working for most of the cells but some cells are not updated. I have just cross verified this. – Amandeep Singh Oct 19 '20 at 10:20
The jQuery $(...) function is designed to be multi-purpose - you can specify an ID, a class, a tagname etc - so the code first needs to determine what you are refering to, and that takes time. The javascript version only works for an id, so knows immediately what you trying to target, so will be quicker. You also have to bear in mind that an ID is case-sensitive - "x" is different from "X" - and that getElementById(..) will only return the first element with that ID, so if you have two with the same ID, the second one will not be seen. So, double-check for upper/lower case and uniqueness. – ATD Oct 19 '20 at 10:39
Even i had the same doubt that maybe there are duplicate ids. So i executed this function https://stackoverflow.com/a/4967254/10585627 in console and i got ```No duplicate IDs found``` – Amandeep Singh Oct 19 '20 at 10:51
OK - that eliminates one potential issue. The other would be case-sensitivity. I guess a third possibility would be a change in id in the source data? Or, perhaps, a TD item without an ID? – ATD Oct 19 '20 at 10:53
I have added your code and i am getting ```Uncaught TypeError: document.getElementById(...) is null``` . Strange it shouldn't happen like this. Is it possible the using datatTable is causing such distortions? – Amandeep Singh Oct 19 '20 at 11:05
That actually is a good thing - that means that an element does not exist on the page with that ID. Does it show you the ID that is missing? – ATD Oct 19 '20 at 11:06
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223283/discussion-between-amandeep-singh-sawhney-and-atd). – Amandeep Singh Oct 19 '20 at 11:07

Right way to dynamically update table

1 Answers1