Error trying to diff ‘[object Object]’. Only arrays and iterables are allowed – Angular8


This Angular Code doesn’t let me display the Array content from a JSON file onto a HTML. The error in console displays “Error trying to diff ‘[object Object]'”

This code is running on my local running Angular 8. I have tried many different methods of fetching the data and different ways of displaying in the HTML but none seem to work

JSON File 
{...} represent a string
      "APP_ID": 1,
      "APP_NAME": "...",
      "APP_SHORT_NAME": "...",
      "APP_TYPE": "...",
      "INTERFACE_ID": 3,
      "INTERFACE_NAME": "...",
      "SOURCE_SYSTEM": "...",
      "TARGET_SYSTEM": "..",
      "OTHER_SYSTEMS": "...",
      "CURRENT_ENV": "...",
      "STATUS": "...",
      "APP_VOLUME": 300,
      "APP_INPUT_QUEUE": "...",
      "APP_OUTPUT_QUEUE": "...",
      "ANALYST": "...",
      "CREATE_DATE": "...",
      "UPDATE_DATE": null,
      "CREATED_BY": "...",
      "MODIFIED_BY": null,
      "COMMENTS": "..."


export class Application {
    APP_ID: number;
    APP_NAME: string;
    APP_SHORT_NAME: string;
    APP_TYPE: string;
    INTERFACE_NAME: string;
    SOURCE_SYSTEM: string;
    TARGET_SYSTEM: string;
    OTHER_SYSTEMS: string;
    CURRENT_ENV: string;
    STATUS: string;
    APP_VOLUME: number;
    APP_INPUT_QUEUE: string;
    APP_OUTPUT_QUEUE: string;
    ANALYST: string;
    CREATE_DATE: string;
    UPDATE_DATE: string;
    CREATED_BY: string;
    MODIFIED_BY: string;
    COMMENTS: string;


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Application } from '../intdets';
import { Observable } from 'rxjs';

  providedIn: 'root'
export class IntdetsService {

  private _url = "/assets/IntDet.json";
  constructor(private http: HttpClient) { }

  getIntdets(): Observable<Application[]> {
    return this.http.get<Application[]>(this._url);


import { Component, OnInit } from '@angular/core';
import { IntdetsService } from '../service/intdets.service';

  selector: 'app-intdets',
  templateUrl: './intdets.component.html',
  styleUrls: ['./intdets.component.css']
export class IntdetsComponent implements OnInit {

  public apps = [];

  constructor(private _intdetsService: IntdetsService) { }

  ngOnInit() {
        .subscribe(data => this.apps = data);



<ul *ngFor = "let app of apps">
  <li>{{app.APP_ID}}</li> //Test code to only print one element

Source: New feed

3 thoughts on - Error trying to diff ‘[object Object]’. Only arrays and iterables are allowed – Angular8

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.