title: Parsing CSV file in vue/typescript
body: <p>I am reading in a csv file and i am in the process of parsing through it but having some trouble. </p>
  
  <p>1 - Before parsing the file i already have an array with strings of headers that i want to pull the data for from the csv file.  </p>
  
  <p>2- I want to parse the file so i can also display the data into a table with my predefined headers. And any extra headers they will be ignored from being displayed in the table. </p>
  
  <p>Here is my code: </p>
  
  <pre><code>this.predefinedHeaders = ["Name", "Age", "Gender"];
  
  readCSV(event: Event) {
    const file = (event.target as HTMLInputElement).files![0];  
    var reader = new FileReader();  
    let text = (reader.result as string).split(/\r\n|\r|\n/);  
    let lines = [];  
    for( var i=1; i&lt;text.length; i++) {  
      var data = text[i].split(',');  
      var tarr=[];  
      for(var j=0; j&lt;this.predefinedHeaders.length; j++) {  
        tarr.push(data[j]);  
      }  
      lines.push(tarr);  
    }  
   this.tableData = lines;  
  }  
  reader.readAsText(file);  
  </code></pre>
  
  <p>What is currently happening is that data is being populated to the table but not under the right headers.. How can i bind the data to my headers... NOTE: the predefined are guaranteed to be part of the original headers from the file. the difference is that it doesn't show data for all the columns such several of them. </p>
  
  <p>HTML View: </p>
  
  <pre><code>table
    thead
     tr
      th(v-for='column in predefinedColumns) {{column.name}}
    tbody
     tr(v-for='(a, index)in data')
      td(v-for='(b, index2) in a') {{data[index][index2]}}
  </code></pre>