html - 在 Angular 2 应用程序中读取 JSON 文件

Question

我有一个文件 data.json，我想将其导入到我的 Angular 2 应用程序中。我正在获取带有 HTML 输入标签的文件。

<input type="file" (change)="onImport($event)"/>

在我的 typescript 文件中，我想读取这个 data.json 文件并将文件内容存储在 JSON 数组中。我进行了搜索，但找不到任何方法来读取文件或任何可以帮助我解决此问题的库。

Answer 1

使用FileReader来自 File API和 JSON.parse() method喜欢:

  onImport(event) {
    var file = event.srcElement.files[0];
    if (file) {
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function (evt) {
            console.log(JSON.parse(evt.target.result));
        }
        reader.onerror = function (evt) {
            console.log('error reading file');
        }
    }
  }