Javascirpt - remove rows dynamically after 2mins

Javascirpt - remove rows dynamically after 2mins

i am calling a webapi using get method which will give json data and i am display as a table from that data. the code which i have given below is working fine. i got around 25 rows(dynamically" of data when i fit the service. this webpage will be refreshed using signalR. when any changes in DB immediately it should reflect in the webpage.

my question is if "" + item.TakeupType + "" value is "Completed" or "cancelled" this row background should change to gray color and after 2mins row should be remove from the webpage.


Note: 1) only 22 rows should display on webpage in orderby asc Datetime.
2) Completed/cancelled items from DB should will display on the webpage for 2 mins and drop off.




My code :

  1. //Webapi call - To load info status.
  2. function LoadinfoStatus() {
  3.     $.ajaxSetup({
  4.         beforeSend: function (xhr) {
  5.             xhr.setRequestHeader('x-api-key', '9024024A-024-485C024-6BC2024DA');
  6.         }
  7.     });

  9.     $.ajax({
  10.         type: "GET",
  11.         url: "https://mywebsites.net/version1/info/494",

  13.         contentType: "application/json; charset=utf-8",

  15.         dataType: "json",
  16.         success: function (data) {
  17.             // alert(JSON.stringify(data));
  18.             $("#DIV").html('');
  19.             var DIV = '';

  21.             //Function to get DateFormat
  22.             function getFormattedDate(date) {
  23.                 // debugger;
  24.                 var inputdate = new Date(date);
  25.                 var currentdate = new Date();

  27.                 var strTime = getFormattedTime(inputdate);
  28.                 var rngStrTime = getFormattedTime(add_minutes(inputdate, 5));

  30.                 if (inputdate > currentdate) {
  31.                     return inputdate.getDate() + '/' + (inputdate.getMonth() == 0 ? 12 : inputdate.getMonth()) + " " + strTime + " - " + rngStrTime;
  32.                 }
  33.                 else {
  34.                     return strTime + " - " + rngStrTime;
  35.                     //return day + "/" + month + " - " + strTime;
  36.                 }
  37.             }

  39.             var add_minutes = function (dt, minutes) {
  40.                 return new Date(dt.getTime() + minutes * 60000);
  41.             }

  43.             function getFormattedTime(inputdate) {
  44.                 var day = inputdate.getDate();
  45.                 var month = inputdate.getMonth() + 1;
  46.                 var hours = inputdate.getHours();
  47.                 var minutes = inputdate.getMinutes();
  48.                 var ampm = hours >= 12 ? 'pm' : 'am';
  49.                 hours = hours % 12;
  50.                 hours = hours ? hours : 12;
  51.                 minutes = minutes < 10 ? '0' + minutes : minutes;

  53.                 return hours + ':' + minutes + ampm;
  54.             }


  57.             $.each(data, function (i, item) {
  58.                 

  60.                
  61.                 var rows = "<tr ' " + (item.Count > 100 ? "data-id='" + item.orderId + "'" : "") + (item.TakeupType == "Cancelled" ? "style='background-color: gray; color: white'" : "") + " align= 'center' > " +
  62.                     "" + "" + "" + "" +
  63.                     "" + item.user.firstName + " " + item.user.lastName.charAt(0) + "." + "" +
  64.                     "" + item.TakeupType + "" +
  65.                     "" + (item.Count == undefined ? "$" + " " + 0 : "$" + " " + item.Count) + "" +
  66.                     "" + getFormattedDate(item.TakeupTimeUtc) + "" +
  67.                     "= 100 ? "style='background-color: darkorange; color: white'>***" : ">") + "" +
  68.                     "";

  70.                 var $tbody = $('tblOrders tbody');

  72.                 $('#tblOrders').append(rows);
  73.             }); //End of foreach Loop

  75.             
  76.             registerEvents();
  77.             // console.log(data);
  78.         }, //End of AJAX Success function

  80.         failure: function (data) {
  81.             alert(data.responseText);
  82.         }, //End of AJAX failure function
  83.         error: function (data) {
  84.             alert(data.responseText);
  85.         } //End of AJAX error function

  87.     });
  88. }