title: Javascript loading CSV file into an array
body: <p>I am developing a web page in Wordpress. The webpage needs to have a combobox with all counties. I have a dataset in csv format which has some 10k rows for all these counties.
  When the user selects a county in the dropdown, I want only the selected county data displayed in the web page. This is my requirement.</p>
  
  <p>In wordpress, my web page I am adding the js file using </p>
  
  <pre><code>&lt;script type="text/javascript" src="http://xxx/wp     content/uploads/2014/05/countyList1.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and the code for webpage dropdown is </p>
  
  <pre><code>&lt;select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>In countyList1.js file I have the setCounties() and getSelectedCountyData() functions.</p>
  
  <p>So far I can see the dropdown with counties list. I don't know how to read the CSV file and apply the selected county filter to this list.</p>
  
  <p>I tried the FileReader object and I can load the CSV contents on the web page but I don't want the user to select the CSV. I have the dataset already.
  </p>
  
  <p>I am trying to use this jquery.csv-0.71 library from this SO post <a href="https://stackoverflow.com/questions/7431268/how-read-data-from-csv-file-using-javascript/12289296#12289296">How to read data From *.CSV file using javascript?</a> but I need help.</p>
  
  <p>Here's the code which gets called when a county is selected</p>
  
  <pre><code>function getSelectedCountyData() {
          cntrySel = document.getElementById('county');
          //selCty = countyList[cntrySel.value];
          handleFiles();
  }
  
  function handleFiles() {
  
      $(document).ready(function () {
          $.ajax({
              type: "GET",
              url: "D:\Docs\Desktop\csvfile.csv",
              dataType: "csv",
              success: function (data) { processData(data); }
          });
      });
  }
  
  function processData(allText) {
      var allTextLines = allText.split(/\r\n|\n/);
      var headers = allTextLines[0].split(',');
      var lines = [];
  
      for (var i = 1; i &lt; allTextLines.length; i++) {
          var data = allTextLines[i].split(',');
          if (data.length == headers.length) {
  
              var tarr = [];
              for (var j = 0; j &lt; headers.length; j++) {
                  tarr.push(headers[j] + ":" + data[j]);
              }
              lines.push(tarr);
          }
      }
      console.log(lines);
      drawOutput(lines);
  }
  
  function drawOutput(lines) {
      //Clear previous data
      document.getElementById("output").innerHTML = "";
      var table = document.createElement("table");
      for (var i = 0; i &lt; lines.length; i++) {
          var row = table.insertRow(-1);
          for (var j = 0; j &lt; lines[i].length; j++) {
              var firstNameCell = row.insertCell(-1);
              firstNameCell.appendChild(document.createTextNode(lines[i][j]));
          }
      }
      document.getElementById("output").appendChild(table);
  }
  </code></pre>