Mapping JSON object to TypeScript class / Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

I am trying to learn Angular2. I am making a http get request but gets the following runtime error :

Error trying to diff '[object Object]'. Only arrays and iterables are allowed

but I should have an array of objects so I am unsure why i get that message.

in the HTML i have

<li *ngFor="let x of hierarkiItemsList">
        {{ x.id }}
      </li>

and this error in the console

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
at DefaultIterableDiffer.diff (core.js:7342)
at NgForOf.ngDoCheck (common.js:2550)
at checkAndUpdateDirectiveInline (core.js:12098)
at checkAndUpdateNodeInline (core.js:13598)
at checkAndUpdateNode (core.js:13541)
at debugCheckAndUpdateNode (core.js:14413)
at debugCheckDirectivesFn (core.js:14354)
at Object.View_HomeComponent_0.__WEBPACK_IMPORTED_MODULE_1__angular_core__._37._co [as updateDirectives] (home.component.html:16)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
at checkAndUpdateView (core.js:13508)

from my component:

hierarkiItemsList: Array;

 ngOnInit() {
this.isLoading = true;

this.isHierarkiItemsListLoading = true;
this.hierarkiItemsList = new Array<HierarkiItem>();

this.siteService.getHierarkiItems({ category: 'xxdev' })
  .pipe(finalize(() => { this.isHierarkiItemsListLoading = false; }))
  .subscribe(postingList => this.hierarkiItemsList = postingList);
}

This is my method in my service that gets the data and maps it to my class

getHierarkiItems(context: SiteContext): Observable<Array<HierarkiItem>> {

return this.http.get(routes.hierarkiItems(context), { cache: true })
  .map((res: Response) => <Array<HierarkiItem>>res.json())
  .do(data => console.log(data))
  .catch(this.handleError);      
 }

Here is my class:

export class HierarkiItem {

    template: string;
    diplayName: string;
    dummypath: string;
    id: number;
    sequence: number;
    published: string;
    lastModified: string;
    tags: Array<string>;
    categories: Array<string>;
    children: Array<string>;
}

Here is my Json

{
"artifacts": [
     {
        "template": "page",
        "displayName": "page A",
        "dummypath" : "/api/pages/1000.json",
        "id": 1000,
        "sequence": 1,
        "publishTimestamp": "01-01-2017 14:00",
        "lastModifiedTimestamp": "01-01-2017 14:00",
        "tags":[
            "page A"
        ],
        "catgories":[
            "category A"
        ],
        "children":[]
    },
    {
        "template": "page",
        "displayName": "page B",
        "dummypath" : "/api/pages/1001.json",
        "id": 1001,
        "sequence": 2,
        "publishTimestamp": "02-01-2017 14:00",
        "lastModifiedTimestamp": "02-01-2017 14:00",
        "tags":[
            "page B"
        ],
        "catgories":[
            "category B"
        ],
        "children":[]
    } 
]
}

Answer 1

Looks like your extract data(from Api) is object instead of array.

You can use this:

return this
  .http.get(routes.hierarkiItems(context), { cache: true })
  .map((res: Response) => <Array<HierarkiItem>>res.json().artifacts)

I think this should work.