CODEWITHSUNDEEP
jsonangularrest
Achref Othmeni
Achref Othmeni

Reputation: 41

how to parse json to angular 7 object?

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

Upvotes: 1

Views: 1663

Answers (2)

wentjun
wentjun

Reputation: 42516

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'])
    );
}

Upvotes: 1

dota2pro
dota2pro

Reputation: 7856

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>(

Upvotes: 2

Related Questions