Angular 4 object from Http nothing displaying/coming through

Question

I have Angular 4 code that is supposed to retrieve data from a local JSON file. The JSON file has nested arrays. The deeper nested data is not showing at all while the error message shows that it is picking up on some data from the JSON file. Here is my JSON file:

   {
    "daysofinterest": {
        "name": "Holidays",
        "year": "2017",
        "version": "1.0",
        "dataitems": [{
            "langauage": "english",
            "listvalues": [{
                    "id": "ac33",
                    "name": "New Year's Day",
                    "value": "New Year's Day",
                    "startdatetime": "02/01/2017 00:00:00 AM",
                    "enddatetime": "02/01/2017 11:59:59 PM",
                    "description":"The first day of the year",
                    "type":"statutory"
                },
                {
                    "id": "bbc3",
                    "name": "Family Day",
                    "value": "Family Day",
                    "startdatetime": "20/02/2017 00:00:00 AM",
                    "enddatetime": "20/02/2017 11:59:59 PM",
                    "description":"Board Game Day with the family",
                    "type":"statutory"
                },
                {
                    "id": "dec2",
                    "name": "Good Friday",
                    "value": "Good Friday",
                    "startdatetime": "14/04/2017 00:00:00 AM",
                    "enddatetime": "14/04/2017 11:59:59 PM",
                    "description":"Easter",
                    "type":"statutory"
                }
            ]
        }, {
            "langauage": "french",
            "listvalues": [{
                    "id": "nnv4",
                    "name": "Jour de l'An",
                    "value": "Jour de l'An",
                    "startdatetime": "02/01/2017 00:00:00 AM",
                    "enddatetime": "02/01/2017 11:59:59 PM",
                    "description":"The first day of the year",
                    "type":"statutory"
                },
                {
                    "id": "hhg6",
                    "name": "Journée familiale",
                    "value": "Journée familiale",
                    "startdatetime": "20/02/2017 00:00:00 AM",
                    "enddatetime": "20/02/2017 11:59:59 PM",
                    "description":"Board Game Day with the family",
                    "type":"statutory"
                },
                {
                    "id": "khm6",
                    "name": "Vendredi saint",
                    "value": "Vendredi saint",
                    "startdatetime": "14/04/2017 00:00:00 AM",
                    "enddatetime": "14/04/2017 11:59:59 PM",
                    "description":"Easter",
                    "type":"statutory"
                }
            ]
        }]
    }
}

How can I iterate through this? I'm also getting the error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'Holidays'. NgFor only supports binding to Iterables such as Arrays.

Here are my other files.

Daysofinterest.ts

export class Daysofinterest {
   constructor( 
    public name: string, 
    public year: string, 
    public version: string, 
    public language: string,
    public id: string, 
    public value: string, 
    public start: string, 
    public end: string, 
    public description: string 
    ) { 
   }
} 

Part of my component file:

loaddaysofinterestToEdit(daysofinterestName: string) {
      this.preProcessConfigurations();
      this.daysofinterestService.getdaysofinterestById(daysofinterestName)
          .subscribe(daysofinterest => {
                    this.daysofinterestIdToUpdate = daysofinterest.name;   
                    this.daysofinterestForm.setValue({ name: daysofinterest.name, year: daysofinterest.year, version: daysofinterest.version, 
                        language: daysofinterest.language, id: daysofinterest.id, value: daysofinterest.value, start: daysofinterest.start, 
                        end: daysofinterest.end, description: daysofinterest.description });
                    this.processValidation = true;
                    this.requestProcessing = false;   
                },
                errorCode =>  this.statusCode = errorCode);   
   }

Here is part of my daysofinterest.component.html

<div *ngFor="let daysofinterest of alldaysofinterests">
  <ul>
    <li>{{daysofinterest.name}}</li>
    <li>{{daysofinterest.year}}</li>
    <li>{{daysofinterest.version}}</li>
  </ul>
  <ng-container *ngFor="let dataitem of daysofinterest.dataitems">
    <ng-container *ngFor="let listvalue of dataitem.listvalues">
      {{listvalue.name}}
    </ng-container>
  </ng-container>
  <div *ngFor="let dataitem of daysofinterest.dataitems">
    <p>{{dataitem.language}}</p>
    <div *ngFor="let listvalue of daysofinterest.dataitems.listvalues">
      <li>{{listvalue.id}}</li>
      <li>{{listvalue.value}}</li><li>{{listvalue.start}}</li>
      <li>{{listvalue.end}}</li><li>{{listvalue.description}}</li>
    </div>
  </div>

EDIT: Upon request:

//Fetch all daysofinterests
   getAllDaysofinterest() {
        this.daysofinterestService.getAllDaysofinterest()
          .subscribe(
                data => this.alldaysofinterests = data,
                errorCode =>  this.statusCode = errorCode);

   }

EDIT: Upon further request:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, URLSearchParams, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';

import { Daysofinterest } from './daysofinterest';

@Injectable()
export class DaysofinterestService {
    //URL for CRUD operations
    daysofinterestUrl = "http://localhost:3000/daysofinterest";
    //Create constructor to get Http instance
    constructor(private http:Http) { 
    }
    //Fetch all daysofinterests
    getAllDaysofinterest(): Observable<Daysofinterest[]> {
        return this.http.get(this.daysofinterestUrl)
                .map(this.extractData)
                .catch(this.handleError);

    }
    //Create daysofinterest
    createdaysofinterest(daysofinterest: Daysofinterest):Observable<any> {
        let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: cpHeaders });
        return this.http.post(this.daysofinterestUrl, daysofinterest, options)
               .map(success => success.status)
               .catch(this.handleError);
    }
    //Fetch daysofinterest by id
    getdaysofinterestById(daysofinterestId: string): Observable<Daysofinterest> {
        let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: cpHeaders });
        console.log(this.daysofinterestUrl +"/"+ daysofinterestId);
        return this.http.get(this.daysofinterestUrl +"/"+ daysofinterestId)
               .map(this.extractData)
               .catch(this.handleError);
    }   
    //Update daysofinterest
    updatedaysofinterest(daysofinterest: Daysofinterest):Observable<string> {
        let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: cpHeaders });
        return this.http.put(this.daysofinterestUrl +"/"+ daysofinterest.name, daysofinterest, options)
               .map(success => success.status)
               .catch(this.handleError);
    }
    //Delete daysofinterest 
    deletedaysofinterestById(daysofinterestId: string): Observable<string> {
        let cpHeaders = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: cpHeaders });
        return this.http.delete(this.daysofinterestUrl +"/"+ daysofinterestId)
               .map(success => success.status)
               .catch(this.handleError);
    }   
    private extractData(res: Response) {
        let body = res.json();
        return body;
    }
    private handleError (error: Response | any) {
        console.error(error.message || error);
        return Observable.throw(error.status);
    }
}

Answer 1

There are a couple of issues going on here in your HTML. Take a look at the Plunker:

<div *ngFor="let daysofinterest of alldaysofinterests">
  <ul>
    <li>{{daysofinterest.name}}</li>
    <li>{{daysofinterest.year}}</li>
    <li>{{daysofinterest.version}}</li>
  </ul>
  <ng-container *ngFor="let dataitem of daysofinterest.dataitems">
    <ng-container *ngFor="let listvalue of dataitem.listvalues">
      {{listvalue.name}}
    </ng-container>
  </ng-container>
  <div *ngFor="let dataitem of daysofinterest.dataitems">
    <p>{{dataitem.language}}</p>
    <div *ngFor="let listvalue of daysofinterest.dataitems.listvalues">
      <li>{{listvalue.id}}</li>
      <li>{{listvalue.value}}</li><li>{{listvalue.start}}</li>
      <li>{{listvalue.end}}</li><li>{{listvalue.description}}</li>
    </div>
  </div>

https://plnkr.co/edit/tM3wOTbWVNvOu0FyvRwz?p=preview