title: JavaScript FileReader and Dynamic Tables
body: <p>I am trying to upload a file and read its contents and then output the contents to a table. The information needs to be place on a new row whenever there is a > char in the string. </p>
  
  <p>I am having a bit of an issue wrapping my head around how I can create a new 'tr' and then add data to the a cell 'td' in that row. </p>
  
  <p>I am stuck on the <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> and adding them dynamically with the contents from the file. I am sure I can use regex to look for the > char but that isn't really what I need help with. I am struggling with how I take the information after the > char and add it to a new row in the table. </p>
  
  <p>UPDATE: Ok, so I am still not fully functional on what I am trying to do. I am uploading the file, reading it, and storing the information as an object. However, I can only do this for one instance. When I upload a text file there will be multiple DNA sequences in the file. Each sequence will have a sequence_id like this:</p>
  
  <blockquote>
    <p>9013e1
    ACAAGATGCCATTGTCCCCCGGCCTCCTGCTGCTGCTGCTCTCCGGGGCCACGGCCACCGCTGCCCTGCC
    CCTGGAGGGTGGCCCCACCGGCCGAGACAGCGAGCATATGCAGGAAGCGGCAGGAATAAGGAAAAGCAGC
    CTCCTGACTTTCCTCGCTTGGTGGTTTGAGTGGACCTCCCAGGCCAGTGCCGGGCCCCTCATAGGAGAGG
    AAGCTCGGGAGGTGGCCAGGCGGCAGGAAGGCGCACCCCCCCAGCAATCCGCGCGCCGGGACAGAATGCC
    CTGCAGGAACTTCTTCTGGAAGACCTTCTCCTCCTGCAAATAAAACCTCACCCATGAATGCTCACGCAAG
    TTTAATTACAGACCTGAA</p>
  </blockquote>
  
  <p>So, I am trying to read the file, find all sequence ID's and then sequences and I want an editable leading and trailing trim like so:</p>
  
  <pre><code>var objArray = [
      {
          'id':  '&gt;9013e1',
          'sequence': 'ACAAGATGCCATTGTCCCCCGGCCT...',
          'lead_trim': //get the value from a input from the user,
          'trail_trim': //same as above
      },
      {
          //another obj like above
      }
  ]
  </code></pre>
  
  <p>The sequence also needs to have a line break inserted after every 60 characters. Once I have processed the data in the text file correctly I then need to output the data to a table like I stated in my original post. The problem I am having is I am getting stuck on only being able to store information for one obj in my objArray. </p>
  
  <p>Here is a look at my code...</p>
  
  <pre><code>function scanForSequences(event) {
      //Get the file from HTML input tag
      var file = event.target.files[0];
      var output = document.getElementById('table');
  
      if(file) {
          var sequenceArray = [];
          var objArray = [];
          var obj = {};
          var str = '';
          var subStr = '';
          //Create a new file reader
          var reader = new FileReader();
          //When the file reader loads
          reader.onload = function(evt) {
              //Add the contents of file to variable contents
              var contentsByLine = evt.target.result.split('\n');
              //Alert user the file upload has succeeded
              alert('File ' + file.name + ' has been uploaded!');
  
              for(var i = 0; i &lt; contentsByLine.length; i++){
                  if(contentsByLine[i].charAt(i) == '&gt;'){
                      obj['id'] = contentsByLine[i];
                  }else{
                      sequenceArray.push(contentsByLine[i]);
                      str = sequenceArray.toString();
                      subStr += str.substring(0, 60) + '\n';
                      str = str.substring(60);
                      obj['sequence'] = subStr;
                      obj['lead_trim'] = 0;
                      obj['trail_trim'] = 0;
                  }
                  objArray.push(obj);
                  console.log(objArray);
              }
  
          }
          reader.readAsText(file);
      } else {
          alert('Failed to upload file!');
      }
      console.log(obj);
  }
  
  document.getElementById('fileItem').addEventListener('change', scanForSequences, false);
  </code></pre>