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.JavaScript FileReader und dynamische Tabellen
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);
ist es möglich, zu verwenden 'fr.onload = addFileDataToResults2' statt Intervalle zu verwenden? –
ja! Ich wusste nicht, aktualisierte Fiedel: https://jsfiddle.net/w6jbuqfy/1/ – derp