how to parse json to angular 7 object? - json

Question

I am trying to consume a web API that returns the following data
{
"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"
}
]
}
}
I created a service like this and the class to parse the json response to it:
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;
}
i subscribed to it on the component but when i try to iterate over it on the template i get the following ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
I think the problem is the way how to map it but I didn't know how to solve it

Answer 1

use http://json2ts.com/ to convert JSON to interface
Your inteface should be like below
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;
}
and then
return this.http.get<FileStatusesRootObject>(

Answer 2

You need to make sure the data types match. It expects a result of type FileStatus[]. Thus, on your RxJS's map(), you will need to return the right data respectively by selecting FileStatus, which contains the array of objects with the type of FileStatus
public getHadoopDirList(): Observable<FileStatus[]> {
return this.http.get<FileStatus[]>(this.webHdfsUrl, {})
.pipe(
map(data => data['FileStatuses']['FileStatus'])
);
}