순수한 자바 스크립트로 CSV를 구문 분석하는 방법

Question

내 원래의 질문은 피드백을 기반으로하지 않았습니다. Papa 구문 분석을 사용하여 CSV를 읽는 다른 방법이 있는지 확인하려고합니다.

내 현재 코드 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="./papaparse.min.js"></script> 

<script> 
    var data; 

// Target first (and only) file selected 
    function handleFileSelect(evt) { 
    var file = evt.target.files[0]; 

// Parse the file 
    Papa.parse(file, { 
     header: true, 
     download: true, 
     dynamicTyping: true, 
     complete: function(results) { 
     data = results; 
     console.log(data); 
     } 
    }); 
    } 

// Run handleFileSelect function when document is ready 
    $(document).ready(function(){ 
    $("#testCsv").change(handleFileSelect); 
    }); 
</script> 

<!--File button to upload file--> 
<input type="file" id="testCsv" name="files"/> 

편집 : 분명히 나는 ​​아래 표에 따라 좀 더 연구 할 필요가있다. 죄송합니다.이 소재의 새로운 브랜드입니다. 나의 다음 시도가 오류를 반환

var data; 

function parseCSV(file) { 
    Papa.parse(file, { 
     header: true, 
     download: true, 
     dynamicTyping: true, 
     complete: function(results) { 
      data = results; 
      console.log(results); // results appear in dev console 
     } 
    }); 
} 
parseCSV(document.getElementById("testCSV").files[0]); 

는 :

ReferenceError: document is not defined 

는 더 많은 연구를 수행.

Answer 1

전혀 jQuery가 사용되지 않습니다. jQuery를 사용하는 것은 코드를 실행하기 전에 DOM이로드 될 때까지 기다렸다가 이벤트 핸들러를 연결하는 것이다.

</body> 태그 바로 전에 스크립트 태그를 HTML 끝으로 이동하면 첫 번째 (대기 중) 할 수 있습니다.

당신은 addEventListener를 사용하여 모든 막연하게 현대적인 브라우저에서 두 번째 작업을 수행 할 수 있습니다

document.getElementById("testCsv").addEventListener("change", handleFileSelect, false); 

당신이 addEventListener이없는 IE8 같은 오래된 브라우저, 또는 자신을 절룩 거리다 더 현대적인 브라우저를 지원해야하는 경우 (IE9-IE11)와 같이 동작하는 경우가 있는데 this answer에는 addEventListener 또는 이전 MS 관련 attachEvent을 사용할 수있는 기능이 있습니다.

Answer 2

자신의 구문 분석 기능을 작성하십시오. 이 함수는 입력 문자열 (CSV 내용)을 가져와 ','문자/문자열로 분할해야합니다.

첫 행을 읽습니다 (행의 끝까지 & 캐리지 리턴). 이것은 당신의 칼럼입니다. 다른 모든 행이 귀하의 데이터입니다.

의미가 있습니까?