Разбор выбранного файла в массив в Angular

Question

Я пытаюсь проанализировать выбранный файл в массиве объектов в Angular 7.

HTML, где я выбираю файл:

<div class="form-group" *ngIf="import">
  <label for="file">Choose backup file</label>
  <input type="file" id="file" (change)="handleFileInput($event.target.files)">
</div>

Я уже могу записать значенияиз файла, используя этот фрагмент кода:

fileToUpload: File = null;
handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
    this.parseFile();
}

parseFile() {
  const fileReader = new FileReader();

  fileReader.onload = (e) => {
    console.log(fileReader.result);
  }

  fileReader.readAsText(this.fileToUpload);
}

Файл всегда является файлом json, содержащим массив объектов, подобных этому:

[
    {"Test": "ValueA", "Value": "SomeStringA"},
    {"Test": "ValueB", "Value": "SomeStringB"},
    ...
]

Моя цель - десериализовать в массив объектовObjectA[] для следующего объекта:

export interface ObjectA {
    Test: string;
    Value: string;
}

Может ли кто-нибудь помочь мне, как продолжить работу с FileReader для этого?

Заранее большое спасибо

Answer 1

JSON.parse() принимает строку, анализирует ее и возвращает объект.Вы можете использовать его для анализа вашего файла.

Вы можете сделать что-то вроде этого:

async parseFile(): Promise<ObjectA[]> {
    const fileReader = new FileReader();

    return new Promise<ObjectA[]>((resolve) => {
        fileReader.onload = (e) => {
            resolve(JSON.parse(fileReader.result));
        }

        fileReader.readAsText(this.fileToUpload);
    });
}

Конечно, в моем решении отсутствует обработка ошибок, но вы понимаете суть.Ниже приведен фрагмент рабочего кода, демонстрирующий мое решение (за исключением приведения типов).

async function uploadFiles(files)  {
  for(const file of files) {
      const parsedObject = await parse(file);
      // Do stuff with your object
  }
}

async function parse(file) {
    const fileReader = new FileReader();

    return new Promise((resolve) => {
        fileReader.onload = (e) => {
            resolve(JSON.parse(fileReader.result));
        }

        fileReader.readAsText(file);
    });
}

<div>
    <input type="file" onchange="uploadFiles(this.files)" />
</div>