JavaScript FileReader und dynamische Tabellen

Question

Ich versuche, eine Datei hochzuladen und seinen Inhalt zu lesen und dann den Inhalt in einer Tabelle auszugeben. Die Information muss in einer neuen Zeile platziert werden, wenn ein Zeichen in der Zeichenfolge vorhanden ist.

Ich habe ein bisschen ein Problem mit meinem Kopf herum, wie ich ein neues 'tr' erstellen und dann Daten zu der a-Zelle 'td' in dieser Zeile hinzufügen kann.

Ich bin auf die <tr> und <td> stecken und sie dynamisch mit den Inhalten aus der Datei hinzufügen. Ich bin sicher, dass ich regex verwenden kann, um nach dem> char zu suchen, aber das ist nicht wirklich, was ich brauche Hilfe mit. Ich kämpfe mit, wie ich die Informationen nach dem> char nehme und es zu einer neuen Zeile in der Tabelle hinzufüge.

UPDATE: Ok, also bin ich immer noch nicht voll funktionsfähig auf was ich versuche zu tun. Ich lade die Datei hoch, lese sie und speichere die Information als Objekt. Dies kann ich jedoch nur für eine Instanz tun. Wenn ich eine Textdatei hochlade, gibt es mehrere DNA-Sequenzen in der Datei. Jede Sequenz wird ein sequence_id wie dieses:

9013e1 ACAAGATGCCATTGTCCCCCGGCCTCCTGCTGCTGCTGCTCTCCGGGGCCACGGCCACCGCTGCCCTGCC CCTGGAGGGTGGCCCCACCGGCCGAGACAGCGAGCATATGCAGGAAGCGGCAGGAATAAGGAAAAGCAGC CTCCTGACTTTCCTCGCTTGGTGGTTTGAGTGGACCTCCCAGGCCAGTGCCGGGCCCCTCATAGGAGAGG AAGCTCGGGAGGTGGCCAGGCGGCAGGAAGGCGCACCCCCCCAGCAATCCGCGCGCCGGGACAGAATGCC CTGCAGGAACTTCTTCTGGAAGACCTTCTCCTCCTGCAAATAAAACCTCACCCATGAATGCTCACGCAAG TTTAATTACAGACCTGAA

Also, ich versuche t o Lesen Sie die Datei, finden Sie alle und die Sequenz ID dann Sequenzen und ich möchte eine editierbare Vorder- und Hinter trimmen wie so:

var objArray = [ 
    { 
     'id': '>9013e1', 
     'sequence': 'ACAAGATGCCATTGTCCCCCGGCCT...', 
     'lead_trim': //get the value from a input from the user, 
     'trail_trim': //same as above 
    }, 
    { 
     //another obj like above 
    } 
] 

Die Reihenfolge muss auch nach jeweils 60 Zeichen eingefügt, um einen Zeilenumbruch haben. Sobald ich die Daten in der Textdatei korrekt verarbeitet habe, muss ich die Daten an eine Tabelle ausgeben, die ich in meinem ursprünglichen Post angegeben habe. Das Problem, das ich habe, ist, dass ich daran festhalte, nur Informationen für einen Obj in meinem ObjArray zu speichern.

Hier ist ein Blick auf mein 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 < contentsByLine.length; i++){ 
       if(contentsByLine[i].charAt(i) == '>'){ 
        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); 

Answer 1

Bitte meine vorgeschlagene Lösung in der Geige unten finden:

https://jsfiddle.net/w6jbuqfy/

Hier ist eine Erklärung dessen, was vor sich geht:

Zuerst haben wir eine Eingabe des Typs Datei:

<input id="input" type="file"> 

Wir haben dann einen Ereignis-Listener es fügen Sie eine Funktion auszuführen, wenn ein Benutzer eine Datei

var inputElement = document.getElementById("input"); 
inputElement.addEventListener("change", handleFile, false); 

Innerhalb der handleFile Funktion ausgewählt hat, verwenden wir einen Filereader die Datei zu lesen.

var fileList = this.files; 
var file = fileList[0]; 
var fr = new FileReader(); 
fr.readAsText(file); 

Jetzt fileReaders sind in der Natur asynchron, hier habe ich ein einfaches Intervall bekam, der alle 100 ms über den Status des Filereader überprüft.

var checkReadyId = setInterval(function(){ 
    if(fr.readyState === 2){ //done 
     window.clearInterval(checkReadyId); 
     addFileDataToResults(fr.result); 
    } else{ 
     console.log('not done yet'); 
    } 
    }, 100); 

FileReaders lesen gemacht, wenn ihre Readystate ist 2. So wir das überprüfen und, wenn wir fertig sind, können wir das Ergebnis von FileReader.result zugreifen. Wenn wir das oben als Text lesen, erhalten wir eine Zeichenfolge zurück. Diese übergeben wir dann an unsere Funktion addFileDataToResults.

function addFileDataToResults(fileAsString){ 
    var resultsDiv = document.getElementById('results'); 
    var tr = document.createElement('tr'); 
    var td = document.createElement('td'); 

    var linesInFile = fileAsString.split('\n'); 
    console.log(linesInFile); 

    td.textContent = linesInFile[0]; 
    tr.appendChild(td); 
    resultsDiv.appendChild(tr); 
    } 

Was hier geschieht, ist, dass wir die resultsDiv greifen, die ein echter Knoten in unserem HTML ist. Wir verwenden dann createElement, das virtuelle Knoten erstellt und Daten in sie einfügt. In diesem Fall fügen wir einfach den Text der ersten Zeile in unsere Datei ein. Sobald wir mit der Erstellung dieser virtuellen Knoten fertig sind, verwenden wir appendChild zu unserem realen Knoten, der den virtuellen Knoten in einen echten Knoten verwandelt und Sie können ihn im HTML sehen.

this helps :)