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

May be in service there shohuld be .json() method called: .then(response => response.json()) — Maxim
– Maxim, Commented Sep 14, 2017 at 13:58
where is alldaysofinterests defined... can you post the code where you are populating values to this — JayDeeEss
– JayDeeEss, Commented Sep 14, 2017 at 14:01

domfx · Accepted Answer · 2017-09-14 18:08:22Z

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

answered Sep 14, 2017 at 18:08

domfx

5113 silver badges6 bronze badges

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

1 Comment

averroes Over a year ago

It worked in your plnkr but mine worked by using: <div *ngIf="!!alldaysofinterests"> <ul> <li>{{alldaysofinterests.name}}</li> <li>{{alldaysofinterests.year}}</li> <li>{{alldaysofinterests.version}}</li> </ul> <div *ngFor="let dataitem of alldaysofinterests.dataitems"> <li>{{dataitem.language}}</li> <div *ngFor="let listvalue of dataitem.listvalues"> <li>{{listvalue.id}}</li> ....

Collectives™ on Stack Overflow

Angular 4 object from Http nothing displaying/coming through

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related