how to parse json to angular 7 object?

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

What exactly are you trying to achieve with map()? It seems to do nothing — wentjun
– wentjun, Commented May 2, 2019 at 19:43

dota2pro · Accepted Answer · 2019-05-02 19:42:55Z

2

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

answered May 2, 2019 at 19:42

dota2pro

7,9548 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wentjun · Accepted Answer · 2019-05-02 19:45:23Z

1

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

answered May 2, 2019 at 19:45

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Collectives™ on Stack Overflow

how to parse json to angular 7 object?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related