Javascript update table with timer(hidden in csv file)
<p>everybody. I have an interesting question. Would be grateful for your help. Working on solution to one task:</p>

<blockquote>
  <p>Implement a financials ticker grid using the CSV data provided Initial
  View</p>
  
  <p>Load and parse the data in snapshot.csv into a model.</p>
  
  <p>Render a grid based on that data to the DOM.</p>
  
  <p>Write an engine to work through deltas.csv and emit update messages to
  parse.</p>
  
  <p>When only a number exists on a line, that amount of time in
  milliseconds should be waited until processing the next set of deltas.
  When the last set of deltas is processed, return to the start of the
  file and repeat.</p>
  
  <p>Each set of deltas should be merged into the existing dataset and then
  propagated to the DOM in the most efficient manner possible.</p>
  
  <p>Provide notification that an item has been updated via a visual flare
  in the UI.</p>
</blockquote>

<p>My path:
I've managed to load the snapshot.csv, parse it, create table, then(using promises), upload the second file delta.csv, parse it, trying to update table, but struggling to create timer function to update the table according to the amount of miliseconds in the delta csv file. Thanks in advance for your advice))I'm learning javascript, and looking for challenges, this looked like an interesting one. </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function CSVToArray( strData, strDelimiter ){
  strDelimiter = (strDelimiter || ",");
  var objPattern = new RegExp(
      (
          // Delimiters.
          "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +

          // Quoted fields.
          "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

          // Standard fields.
          "([^\"\\" + strDelimiter + "\\r\\n]*))"
      ),
      "gi"
      );
  var arrData = [[]];
  var arrMatches = null;
  while (arrMatches = objPattern.exec( strData )){
      var strMatchedDelimiter = arrMatches[ 1 ];
      if (
          strMatchedDelimiter.length &amp;&amp;
          strMatchedDelimiter !== strDelimiter
          ){
          arrData.push( [] );
      }
      var strMatchedValue;
      if (arrMatches[ 2 ]){
          strMatchedValue = arrMatches[ 2 ].replace(
              new RegExp( "\"\"", "g" ),
              "\""
              );
      } else {
          // We found a non-quoted value.
          strMatchedValue = arrMatches[ 3 ];
      }
      arrData[ arrData.length - 1 ].push( strMatchedValue );
  }

  // Return the parsed data.
  return( arrData );
    }

function httpGet(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function() {
      if (this.status == 200) {
        resolve(this.response);
      } else {
        var error = new Error(this.statusText);
        error.code = this.status;
        reject(error);
      }
    };
    xhr.onerror = function() {
      reject(new Error("Network Error"));
    };
    xhr.send();
  });

}

var r1,r2
httpGet('snapshot.csv').then(function(result) {
  r1 = CSVToArray(result);
  createTable(r1);
  return httpGet('deltas.csv')
}).then(function(result2) {
     r2 = CSVToArray(result2);
     updateTable(r2)
   });

var hInterval = null;
var k = 0;
var iteration=0;
function updateTable(how) {
    var myTable = document.getElementById('myTable');
    var j=1;
    var watch_dog=0;
    var x = document.getElementById("myTable").rows[0].cells;
    console.log(x);
    while(j&lt;myTable.rows.length) {

        if (typeof(how[k]) !== "undefined") { //

            var startPos = 2; //In file we have broken data (some time 6 columns some time 5)
            if (how[k].length === 5)
                startPos = 1;

            var valueAdded=0; //How much value changed
            for (var i = startPos; i &lt; startPos + 3; i++) {

                var value = how[k][i];

                if (typeof(value) !== "undefined") {
                    valueAdded++;
                    if (value.length &gt; 0) {
                        if (startPos === 2)
                            myTable.rows[j].cells[i].innerHTML = value;
                        else
                            myTable.rows[j].cells[i + 1].innerHTML = value;
                    }
                }
            }

            if (valueAdded&gt;0) //if some values changed we are increment j
             j++;

            k++; //Increment global row pointer


        } else {
            //Restart when we finished
           iteration=1;
            k=0;
            break;
        }
    }
}


function createTable(now) {
 var body = document.getElementsByTagName("body")[0];
    // create elements &lt;table&gt; and a &lt;tbody&gt;
    var tbl     = document.createElement("table");
    var tblBody = document.createElement("tbody");
    tbl.setAttribute("id","myTable");
    // cells creation
    for (var j = 0; j &lt; now.length-1; j++) {
        // table row creation
        var row = document.createElement("tr");

        for (var i = 0; i &lt; now[0].length; i++) {
            // create element &lt;td&gt; and text node
            //Make text node the contents of &lt;td&gt; element
            // put &lt;td&gt; at end of the table row
            var cell = document.createElement("td");
            var cellText = document.createTextNode(now[j][i]);

            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        //row added to end of table body
        tblBody.appendChild(row);
    }

    // append the &lt;tbody&gt; inside the &lt;table&gt;
    tbl.appendChild(tblBody);
    // put &lt;table&gt; in the &lt;body&gt;
    body.appendChild(tbl);
    // tbl border attribute to
    tbl.setAttribute("border", "2");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Application&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
     &lt;meta name="description" content="Demo project"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;style type="text/css"&gt;&lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;Let the game begin!&lt;/p&gt;
 &lt;/body&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Project files:
<a href="https://dw3i9sxi97owk.cloudfront.net/uploads/jobAttachments/150928161919_pph.zip" rel="nofollow">https://dw3i9sxi97owk.cloudfront.net/uploads/jobAttachments/150928161919_pph.zip</a></p>