JavaScript FileReader和動態表

Question

我正在嘗試上傳文件並讀取其內容，然后將內容輸出到表中。 只要字符串中包含> char，就需要將信息放置在新行中。

我在解決如何創建新的“ tr”然后將數據添加到該行的“ td”單元中時遇到了一個問題。

我被困在<tr>和<td> ，並將它們與文件中的內容動態添加在一起。 我確信我可以使用正則表達式查找> char，但這並不是我真正需要的幫助。 我在如何處理> char之后的信息並將其添加到表的新行中時感到很掙扎。

更新：好的，所以我仍然無法完全發揮我的作用。 我正在上傳文件，讀取文件並將信息存儲為對象。 但是，我只能在一個實例上執行此操作。 當我上傳文本文件時，文件中將有多個DNA序列。 每個序列都有一個sequence_id，如下所示：

9013e1 ACAAGATGCCATTGTCCCCCGGCCTCCTGCTGCTGCTGCTCTCCGGGGCCACGGCCACCGCTGCCCTGCC CCTGGAGGGTGGCCCCACCGGCCGAGACAGCGAGCATATGCAGGAAGCGGCAGGAATAAGGAAAAGCAGC CTCCTGACTTTCCTCGCTTGGTGGTTTGAGTGGACCTCCCAGGCCAGTGCCGGGCCCCTCATAGGAGAGG AAGCTCGGGAGGTGGCCAGGCGGCAGGAAGGCGCACCCCCCCAGCAATCCGCGCGCCGGGACAGAATGCC CTGCAGGAACTTCTTCTGGAAGACCTTCTCCTCCTGCAAATAAAACCTCACCCATGAATGCTCACGCAAG TTTAATTACAGACCTGAA

因此，我試圖讀取文件，找到所有序列ID，然后找到序列，我想要一個可編輯的前導和尾隨修整，如下所示：

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
    }
]

該序列還需要在每60個字符后插入一個換行符。 一旦正確處理了文本文件中的數據，便需要將數據輸出到表中，就像我在原始帖子中所說的那樣。 我遇到的問題是我只能在我的objArray中存儲一個obj的信息。

這是我的代碼...

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

請在下面的小提琴中找到我建議的解決方案：

https://jsfiddle.net/w6jbuqfy/

這是對發生的情況的解釋：

首先，我們輸入文件類型：

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

然后，我們在用戶選擇文件后將事件偵聽器附加到該事件偵聽器以執行功能

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

在handleFile函數內部，我們使用FileReader讀取文件。

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

現在，FileReader本質上是異步的，在這里，我有一個簡單的間隔，每100毫秒檢查一次FileReader的狀態。

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

當FileReader的readyState為2時，便完成了讀取操作。因此，我們對此進行了檢查，一旦完成，便可以從FileReader.result訪問結果。 當我們在上文前面以文本形式閱讀時，我們將返回一個字符串。 然后，將其傳遞給我們的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);
  }

這里發生的是，我們獲取了resultsDiv，它是HTML中的真實節點。 然后，我們使用createElement創建虛擬節點並將數據放入其中。 在這種情況下，我們只是將第一行的文本放入文件中。 創建完此虛擬節點后，我們對真實節點使用appendChild，這會將虛擬節點變為真實節點，您可以在html中看到它。

希望這可以幫助 ：）