Update div table with new data using JavaScript

Question

I have a table on my website which is created initially when the page is loaded. The source data is from an API and changes throughout the day, I added a button to refresh the data but when it's clicked the data in the table is duplicated. It only seems to update the table properly when the page is refreshed which isn't what I want.

Here is the code I have to create the table:

for (var i in api_data) {

  var wrap = document.getElementById("live_data");

  var new_row = '';
  new_row += '<div id="id'+api_data[i].bf_event_id+'" class="table-row">';
  new_row += '<div class="table-cell text-left"><div class="data-country text-bold">'+api_data[i].Country+'</div></div>';
  new_row += '<div class="table-cell text-center"><div class="data-time text-bold">'+parseTime(api_data[i].Start_Time)+'</div></div>';
  new_row += '<div class="table-cell text-left"><div class="data-variable text-bold">'+api_data[i].variable+'</div></div>';
  new_row += '<div class="table-cell text-left"><div class="data-course text-bold">'+api_data[i].Course+'</div></div>';
  new_row += '<div class="id table-cell text-bold">'+api_data[i].Name+'</div>';
  new_row += '<div class="table-cell text-right"><div class="data-advised-odds text-bold">'+api_data[i].Odds+'</div></div>';
  new_row += '<div class="table-cell text-right"><div class="data-edge text-bold">'+api_data[i].Edge+'</div></div>';
  new_row += '<div class="table-cell text-right"><div class="data-edge text-bold">'+api_data[i].strategy_id+'</div></div>';
  new_row += '</div>';

  wrap.innerHTML += new_row;

}

This just sits within a function and is called when the page is refreshed or when the refresh button is clicked.

Is there a way to completely rebuild the table without duplicating the existing data? The data in each row is unique so I thought I could just check if the Name already exists before adding the new row but I don't know how to query the existing table?

thanks

if can show structure of the table or even better if you can create an sample jsfiddle, it will help. — Pawan Singh
– Pawan Singh, Commented Jul 15, 2020 at 19:01
@PawanSingh There's no need for Fiddles. That can be added right here. — Scott Marcus
– Scott Marcus, Commented Jul 15, 2020 at 19:03
Please add some more code for context. We don't know what the refresh button is doing — Adam Neuwirth
– Adam Neuwirth, Commented Jul 15, 2020 at 19:04
You just need to clear out wrap before the loop runs, which will create the new rows. — Scott Marcus
– Scott Marcus, Commented Jul 15, 2020 at 19:06

Scott Marcus · Accepted Answer · 2020-07-15 19:06:51Z

2

//Clear the output when pressing refresh to avoid duplicating

var wrap = document.getElementById("live_data");

wrap.innerHTML = '';

for (var i in api_data) {

  var new_row = '';
  new_row += '<div id="id'+api_data[i].bf_event_id+'" class="table-row">';
  new_row += '<div class="table-cell text-left"><div class="data-country text-bold">'+api_data[i].Country+'</div></div>';
  new_row += '<div class="table-cell text-center"><div class="data-time text-bold">'+parseTime(api_data[i].Start_Time)+'</div></div>';
  new_row += '<div class="table-cell text-left"><div class="data-variable text-bold">'+api_data[i].variable+'</div></div>';
  new_row += '<div class="table-cell text-left"><div class="data-course text-bold">'+api_data[i].Course+'</div></div>';
  new_row += '<div class="id table-cell text-bold">'+api_data[i].Name+'</div>';
  new_row += '<div class="table-cell text-right"><div class="data-advised-odds text-bold">'+api_data[i].Odds+'</div></div>';
  new_row += '<div class="table-cell text-right"><div class="data-edge text-bold">'+api_data[i].Edge+'</div></div>';
  new_row += '<div class="table-cell text-right"><div class="data-edge text-bold">'+api_data[i].strategy_id+'</div></div>';
  new_row += '</div>';

  wrap.innerHTML += new_row;

}

edited Jul 15, 2020 at 19:06

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

answered Jul 15, 2020 at 19:05

David Öhlund

643 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MidnightDataGeek Over a year ago

this works but it clears the headers. The data updates because I can see it in the console but the table on the page doesn't change which is what I need it to do,

Pawan Singh · Accepted Answer · 2020-07-15 19:18:03Z

If you are getting entire data in live_data on click of refresh button

// Clear the entire HTML content of element with id -- live_data var wrap = document.getElementById("live_data"); wrap.innerHTML = ''; for (var i in api_data) {

 var new_row = '';
 new_row += '<div id="id'+api_data[i].bf_event_id+'" class="table-row">';
 new_row += '<div class="table-cell text-left"><div class="data-country text-bold">'+api_data[i].Country+'</div></div>';
 new_row += '<div class="table-cell text-center"><div class="data-time text-bold">'+parseTime(api_data[i].Start_Time)+'</div></div>';
 new_row += '<div class="table-cell text-left"><div class="data-variable text-bold">'+api_data[i].variable+'</div></div>';
 new_row += '<div class="table-cell text-left"><div class="data-course text-bold">'+api_data[i].Course+'</div></div>';
 new_row += '<div class="id table-cell text-bold">' + api_data[i].Name + '</div>';
 new_row += '<div class="table-cell text-right"><div class="data-advised-odds text-bold">'+api_data[i].Odds+'</div></div>';
 new_row += '<div class="table-cell text-right"><div class="data-edge text-bold">'+api_data[i].Edge+'</div></div>';
 new_row += '<div class="table-cell text-right"><div class="data-edge text-bold">'+api_data[i].strategy_id+'</div></div>';
 new_row += '</div>';
 wrap.innerHTML += new_row;

}

If you are only getting diff in the live_data but there are duplicates that you want to avoid.

for (var i in api_data) {

   var wrap = document.getElementById("live_data");

   var elem = document.querySelector(`${api_data[i].Name}`);
   if (elem) {
       // an table row containing this element is alreay there
       // So ignore this element and continue with next
       continue;
   }  

   var new_row = '';
   new_row += '<div id="id'+api_data[i].bf_event_id+'" class="table-row">';
   new_row += '<div class="table-cell text-left"><div class="data-country text-bold">'+api_data[i].Country+'</div></div>';
   new_row += '<div class="table-cell text-center"><div class="data-time text-bold">'+parseTime(api_data[i].Start_Time)+'</div></div>';
   new_row += '<div class="table-cell text-left"><div class="data-variable text-bold">'+api_data[i].variable+'</div></div>';
   new_row += '<div class="table-cell text-left"><div class="data-course text-bold">'+api_data[i].Course+'</div></div>';
   new_row += `<div class="id table-cell text-bold ${api_data[i].Name}">${api_data[i].Name}</div>`;
   new_row += '<div class="table-cell text-right"><div class="data-advised-odds text-bold">'+api_data[i].Odds+'</div></div>';
   new_row += '<div class="table-cell text-right"><div class="data-edge text-bold">'+api_data[i].Edge+'</div></div>';
   new_row += '<div class="table-cell text-right"><div class="data-edge text-bold">'+api_data[i].strategy_id+'</div></div>';
   new_row += '</div>';



   wrap.innerHTML += new_row;

 }

Sven.hig · Accepted Answer · 2020-07-15 20:06:15Z

you should simply clear the tables before inserting the new one rows you could that by simply iterating through the childNodes and removing them, Here is an example that should help you understand how you can achieve this

var wrap = document.getElementById("live_data");
var button=document.getElementById("update")
j=0
var t=true
button.addEventListener("click",()=>{
 while (wrap.firstChild) {   // use while to remove old table children 
  wrap.removeChild(wrap.firstChild);
}  
  if(t){
    api_data=[1,2,3,4,5]
    t=false
  }
  else {api_data=[17,7,73,47,75],t=true}
  for (var i in api_data) {
  var new_row = '';
new_row += '<div class="table-cell text-left"><div class="data-country text-bold">'+api_data[i]+'</div></div>';
wrap.innerHTML += new_row; 
}
})

<div id="live_data"></div>
<button id="update">addtable</button>

Collectives™ on Stack Overflow

Update div table with new data using JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related