web-dev-qa-db-ja.com

FileReaderを使用してJSONファイルを読み取りますか？

ユーザーがアップロードしたJSONファイルを読み取って、配列にコピーしようとしています。ただし、.readAsText（）を使用すると、返される戻り値には、\ "や\ n、その他の文字列のようなプロパティなど、文字列のフォーマットが（明らかに）含まれます。

FileReader（またはサーバーを含まない他の形式の読み取りファイル）を使用してJSONファイルを読み取り、プレーンJSONのみを返す方法はありますか？

たとえば、それを返すようにする

[
  {"hello": "world"}
]

または

[{"hello": "world"}]

ではなく

"[\n{\"hello\": \"world\"}\n]"

？

編集：JSON.parse（text）メソッドを認識しましたが、FileReaderオブジェクトを解析するときにエラーが発生します

 let fileUploaded = new FileReader();
 fileUploaded.readAsText(MY_JSON_FILE);
 console.log(JSON.parse(fileUploaded));

エラーを返しますerror TS2345: Argument of type 'FileReader' is not assignable to parameter of type 'string'

FileReaderで読み取ったものを文字列である別の変数に取得し、その新しい変数を解析できますか？

javascripttypescriptfilereader
3
José M.

問題のコードは FileReader を誤って使用しています。

FileReader.readAs<Type>操作は非同期です。 FileReaderにはloadイベントとloadendイベントがあり、resultプロパティはevent.targetおよびFileReaderインスタンスは、結果として非同期で処理されるデータです。

FileReaderオブジェクト自体を解析しないでください。

.readAs<Type>は、JavaScriptプレーンオブジェクトではなく、 Blob がパラメータとして渡されることを期待しています。

const MY_JSON_FILE = [{
  "hello": "world"
}];

let json = JSON.stringify(MY_JSON_FILE);

const blob = new Blob([json], {type:"application/json"});

const fr = new FileReader();

fr.addEventListener("load", e => {
  console.log(e.target.result, JSON.parse(fr.result))
});

fr.readAsText(blob);
8
guest271314