JavaScript FileReader 및 동적 테이블

Question

파일을 업로드하고 해당 내용을 읽은 다음 내용을 테이블로 출력하려고합니다. 문자열에> char가있을 때마다 정보를 새 행에 배치해야합니다.

새로운 'tr'을 만들고 그 행의 셀 'td'에 데이터를 추가하는 방법에 대해 머리를 감싸는 데 문제가 있습니다.

나는 <tr>과 <td>에 붙어있어 파일의 내용을 동적으로 추가합니다. 나는 정규식을 사용하여 숯을 찾을 수 있다고 확신하지만 실제로 도움이 필요한 것은 아니다. 나는> char 뒤에 정보를 가져 와서 테이블의 새로운 행에 추가하는 방법으로 고민하고있다.

업데이트 : 좋아, 아직 내가하고 싶은 일에 완전히 기능하지 못했습니다. 나는 파일을 업로드하고, 그것을 읽고, 객체로서 정보를 저장하고있다. 그러나, 나는 하나의 인스턴스에 대해서만 이것을 할 수있다. 텍스트 파일을 업로드 할 때 파일에 여러 개의 DNA 시퀀스가 ​​있습니다. 각 시퀀스는이 같은 sequence_id해야합니다 :

9013e1 ACAAGATGCCATTGTCCCCCGGCCTCCTGCTGCTGCTGCTCTCCGGGGCCACGGCCACCGCTGCCCTGCC CCTGGAGGGTGGCCCCACCGGCCGAGACAGCGAGCATATGCAGGAAGCGGCAGGAATAAGGAAAAGCAGC CTCCTGACTTTCCTCGCTTGGTGGTTTGAGTGGACCTCCCAGGCCAGTGCCGGGCCCCTCATAGGAGAGG AAGCTCGGGAGGTGGCCAGGCGGCAGGAAGGCGCACCCCCCCAGCAATCCGCGCGCCGGGACAGAATGCC을 CTGCAGGAACTTCTTCTGGAAGACCTTCTCCTCCTGCAAATAAAACCTCACCCATGAATGCTCACGCAAG TTTAATTACAGACCTGAA

그래서, 내가 노력하고 t 오, 파일을 읽어들이는 모든 시퀀스 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에 대한 정보 만 저장할 수있는 것에 매달려있다.

여기 https://jsfiddle.net/w6jbuqfy/

는 무슨 일이 일어나고 있는지에 대한 설명입니다 : 여기

는

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

아래의 바이올린 내 제안 된 솔루션을 찾아주세요 ... 내 코드를 살펴입니다

먼저 파일 형식의 입력이 있습니다.

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

우리는 다음 기능을 실행하는 데에 이벤트 리스너를 부착 한 번 사용자가 파일 handleFile 기능 내부

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

을 선택했습니다, 우리는 파일을 읽어을 FileReader를 사용합니다.

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

이제 fileReaders는 기본적으로 비동기 적이므로 여기서 파일 판독기의 상태를 100ms마다 확인하는 간단한 간격이 있습니다.자신의 readyState의 2. 그래서 우리가 확인하고 우리가 완료되면, 우리는 FileReader.result에서 결과에 액세스 할 수 있습니다 때

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

FileReaders는 읽기 수행됩니다. 앞에서 본 텍스트를 읽었을 때 문자열을 반환합니다. 그런 다음이를 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); 
    } 

여기서 일어나는 일은 Google HTML의 실제 노드 인 resultsDiv를 가져 오는 것입니다. 그런 다음 createElement를 사용하여 가상 노드를 만들고 데이터를 가상 노드에 저장합니다. 이 경우 첫 번째 줄의 텍스트를 파일에 넣기 만하면됩니다. 이 가상 노드를 만들면 실제 노드로 appendChild를 사용하여 가상 노드를 실제 노드로 바꾸고 html에서 볼 수 있습니다.

희망이 :