Как разобрать JSON для угловых 7 объектов?

Question

Я пытаюсь использовать веб-API, который возвращает следующие данные

{
"FileStatuses": {
    "FileStatus": [
        {
            "accessTime": 0,
            "blockSize": 0,
            "childrenNum": 13,
            "fileId": 16396,
            "group": "supergroup",
            "length": 0,
            "modificationTime": 1553247533630,
            "owner": "hduser",
            "pathSuffix": "demo-data",
            "permission": "755",
            "replication": 0,
            "storagePolicy": 0,
            "type": "DIRECTORY"
        },
        {
            "accessTime": 0,
            "blockSize": 0,
            "childrenNum": 7,
            "fileId": 16410,
            "group": "supergroup",
            "length": 0,
            "modificationTime": 1550659883380,
            "owner": "hduser",
            "pathSuffix": "instacart",
            "permission": "755",
            "replication": 0,
            "storagePolicy": 0,
            "type": "DIRECTORY"
        }
    ]
}
}

Я создал подобную службу и класс для анализа ответа json:

  public getHadoopDirList(): Observable<FileStatus[]> {
return this.http.get<FileStatus[]>(this.webHdfsUrl, {}).pipe(map(data => data));
  }

   export class FileStatus {
accessTime: number;
blockSize: number;
childNum: number;
fileId: number;
group: string;
length: number;
modificationTime: number;
owner: string;
pathSuffix: string;
permission: string;
replication: number;
storagePolicy: number;
type: string;
}

я подписался на него на компоненте, но когда я пытаюсь выполнить итерации по шаблону, я получаю следующее ОШИБКА: ошибка при попытке изменить '[объект объекта]'.Разрешены только массивы и итерации

Я думаю, проблема в том, как сопоставить его, но я не знал, как его решить

Answer 1

используйте http://json2ts.com/ для преобразования JSON в интерфейс

Ваш интерфейс должен быть таким, как показано ниже

export interface FileStatus {
    accessTime: number;
    blockSize: number;
    childrenNum: number;
    fileId: number;
    group: string;
    length: number;
    modificationTime: any;
    owner: string;
    pathSuffix: string;
    permission: string;
    replication: number;
    storagePolicy: number;
    type: string;
}

export interface FileStatuses {
    FileStatus: FileStatus[];
}

export interface FileStatusesRootObject {
    FileStatuses: FileStatuses;
}

, а затем

return this.http.get<FileStatusesRootObject>(

Answer 2

Вы должны убедиться, что типы данных совпадают. Ожидается результат типа FileStatus[]. Таким образом, на карте вашего RxJS () вам необходимо будет вернуть правильные данные соответственно, выбрав FileStatus, который содержит массив объектов типа FileStatus

public getHadoopDirList(): Observable<FileStatus[]> {
  return this.http.get<FileStatus[]>(this.webHdfsUrl, {})
    .pipe( 
      map(data => data['FileStatuses']['FileStatus'])
    );
}