テキストファイルの内容をJavascript変数に保存する方法は？

Question

私は150,000以上のテキスト行のテキストファイルを読み込もうとしています。テキストファイルを読み込み、processFileContentのパラメータとして渡したいと思っています。

この方法で試しましたが、うまくいきません。また、このような大きなデータに対してこれを行うより良い方法がありますか？

function readFile(file) { 
    var reader = new FileReader(); 
    reader.onload = function (evt) { 
    var data = evt.target.result; 
}; 
    reader.readAsText(file); 
    return data; 
} 

document.getElementById('file').addEventListener('change', readFile, false); 

var data = readFile(); 

function processFileContent(data) { 
    var list = data.split('\n'); 
    ... 

Answer 1

FileReader.onloadイベントは結果を非同期的に返します。コールバックまたはPromiseを使用してresultをFileReader〜processFileContentに返すことができます。またのreadFileはeventオブジェクトであり、.filesのプロパティはevent.targetではありません。

function readFile(event) { 
    var file = event.target.files[0]; 
    if (file) { 
    new Promise(function(resolve, reject) { 
     var reader = new FileReader(); 
     reader.onload = function (evt) { 
     resolve(evt.target.result); 
     }; 
     reader.readAsText(file); 
     reader.onerror = reject; 
    }) 
    .then(processFileContent) 
    .catch(function(err) { 
     console.log(err) 
    }); 
    } 
} 

document.getElementById('file') 
.addEventListener('change', readFile, false); 

function processFileContent(data) { 
    var list = data.split('\n'); 
    ... 

Answer 2

あなたの問題の1つが有効範囲です。 イベントハンドラのローカル変数としてdataを宣言し、外部関数（undefined）から戻そうとしました。これを修正するには、イベントハンドラから変数宣言を移動する必要があります。

イベントハンドラへの引数としてファイルを期待していますが、イベントはEventオブジェクトをイベントハンドラに渡します。ファイルを取得するには、event.target.files[0]を取得する必要があります。これで解決するはずです。

function readFile(event) { 
    var file = event.target.files[0]; // getting the file Blob 
    var reader = new FileReader(); 
    var data; // moved declaration 
    reader.onload = function (evt) { 
     data = evt.target.result; 
    }; 
    reader.readAsText(file); 
    return data; 
}