It is not possible to iterate through objects in Angular 12 as only arrays and iterables are permitted for iteration

Here are the model classes I am using:

import { Employee } from "./employee";

export interface Company {
  id: number;
  companyName: string;
  dateOfEstablishment: Date;
  companyInformation: string;
  companyLogo: string;
  employees: Employee[];
}

import { Company } from "./company";
import { EmployeeAddresses } from "./employeeAddresses";
import { EmployeeBankData } from "./employeeBankData";
import { EmployeeContacts } from "./employeeContacts";
import { EmployeeContracts } from "./employeeContracts";
import { EmployeeDependents } from "./employeeDependents";
import { EmployeeIdentityDocuments } from "./employeeIdentityDocuments";
import { EmployeePersonalDatas } from "./employeePersonalDatas";

export interface Employee {
  id: number;
  employeePersonalDatas: EmployeePersonalDatas;
  employeeAddresses: EmployeeAddresses[];
  employeeContacts: EmployeeContacts[];
  employeeIdentityDocuments: EmployeeIdentityDocuments[];
  employeeBankData: EmployeeBankData[];
  employeeDependents: EmployeeDependents;
  employeeCompany: Company;
}

 public companies: Company[] = [];

  public constructor(private companyService: CompanyService) { }

  public ngOnInit(): void {
    this.getCompanies();
  }

  public getCompanies() {
    this.companyService.getCompanies().subscribe((companies) => {
      this.companies = companies;
    })
  }

This component is for displaying a list of companies

private baseUrl: string = `${environment.baseUrl}`;

  public constructor(private httpClient: HttpClient) {}

  public getCompanies(): Observable<Company[]> {
    return this.httpClient.get<Company[]>(this.baseUrl);
  }

This corresponds to my service

<div *ngFor="let company of companies">
    <app-company-card [company]="company" (selectionChange)="onItemSelected()"></app-company-card>
</div>

Can anyone assist me? It's for my internship and I'm facing an issue with an error message: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Answer №1

{$id: '1', $values: Array(10)}$id: "1"$values: Array(10)0: {$id: '2', id: 3, companyName: 'Company112', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}1: {$id: '14', id: 16, companyName: 'companieeeee', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}2: {$id: '16', id: 17, companyName: 'companiaSDFSSFFFSFFS', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}3: {$id: '20', id: 18, companyName: 'MyCompany', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: 'Nice Company', ...}4: {$id: '23', id: 19, companyName: 'create', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}5: {$id: '25', id: 20, companyName: 'create', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}6: {$id: '27', id: 21, companyName: 'sssss', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}7: {$id: '29', id: 22, companyName: 'sssss', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}8: {$id: '31', id: 23, companyName: 'sssss', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}9: {$id: '33', id: 24, companyName: 'sssss', dateOfEstablishment: '0001-01-01T00:00:00', companyInformation: null, ...}length: 10[[Prototype]]: Array(0)[[Prototype]]: Object

I discovered this content in the console through a console.log statement, confirming it is indeed an array.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An error in typescript involving a "const" assertion and a string array

Currently, I am diving into the world of Typescript along with React. However, an error has emerged in my path that I can't seem to figure out. It's puzzling why this issue is occurring in the first place. Allow me to elaborate below. const color ...

Selection of input from the mat-select component is a composed object

I am facing a challenge when trying to input a composed value into a select field. Let's consider our object contains only an ID and a name. The typical way to create a functional select would be: <mat-form-field> <mat-label>Placeholder ...

Tips for efficiently combining mergeMap observables and providing a singular value for the entire observable

Consider this particular case involving TypeScript/angular with rxjs 6.5: main(){ const items = ['session', 'user']; const source: Observable<any> = from(items); source .pipe( ...

show additional worth on the console

Just starting out with JavaScript. Trying to display additional values in the console. Uncertain about how to access add-ons. Can anyone help me troubleshoot? Here is my code snippet below: https://jsfiddle.net/6f8upe80/ private sports: any = { ...

Incorporate form information into an array in Angular Version 2 or higher

This form is where I craft my questions https://i.sstatic.net/93781.png When composing a question, the ability to include multiple alternatives is available. There will also be an option to edit these alternatives. The desired format for my array is as ...

Customizing the Android Back Button behavior in NativeScript for a single specific page

I am currently using NativeScript version 5.2.4 along with TypeScript. My goal is to disable the back button functionality in one specific page only, but I'm facing an issue where it also disables the back button behavior for child pages. Below is the ...

a dedicated TypeScript interface for a particular JSON schema

I am pondering, how can I generate a TypeScript interface for JSON data like this: "Cities": { "NY": ["New York", [8000, 134]], "LA": ["Los Angeles", [4000, 97]], } I'm uncertain about how to handle these nested arrays and u ...

What is preventing the getters for form errors from functioning in my Angular Reactive Form component template, while a direct reference does work?

I have a question regarding a small issue with an Angular reactive form in a lazily loaded signup module. The code structure is structured as follows: TS get email() { return this.myForm.get('email'); } // While this code works from within th ...

The technique for concealing particular div elements is contingent upon the specific values within an array

My TypeScript code is returning an array in this format: allFlowerTypes (3) ['Rose', 'Bluebell' , 'Daisy'] I want to dynamically show or hide the following HTML content based on the array values above: <ul> <li> ...

Experiencing a Challenge with Angular Form Validation

Can anyone assist me in figuring out why I keep encountering this issue of falling? An 'name' does not exist in type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions', as object literals may only specify known properties. expo ...

Tips on effectively modifying a deeply nested item within a data set, presented as a React component

I have a collection that spans across n levels, with the last level containing a data row holding a value. Showing this value is straightforward, but when I need to edit it, the entire collection has to be re-rendered, resulting in significant delays. This ...

Create a variable that is assigned the value of a route parameter, but leave it undefined if the parameter cannot be

I am working on an Angular 7 component where I extract a route parameter value: export class PostComponent implements OnInit { postId: number; constructor(private route: ActivatedRoute) { } ngOnInit() { console.log(this.postId); this.ro ...

The data type 'string | number | boolean' cannot be assigned to type 'undefined'. Specifically, the type 'string' is incompatible with type 'undefined'. Error code: ts(2322)

When attempting to create a partial object with specific fields from a full object that meet certain criteria, I encountered a TypeScript error message. To better explain this issue, I designed a test module to showcase the concept/problem without using ac ...

Moving from Http to HttpClient in Angular4Changeover your Angular4

I recently migrated my Angular app to use the new HttpClient, but I'm encountering some challenges in achieving the same results as before with Http. Can anyone help me out? Here's what I was doing with Http: getAll() { return this.http.get ...

Error message stating: "Form control with the name does not have a value accessor in Angular's reactive forms."

I have a specific input setup in the following way: <form [formGroup]="loginForm""> <ion-input [formControlName]="'email'"></ion-input> In my component, I've defined the form as: this.log ...

Angular application experiencing issues with fixed headers not scrolling correctly

I've been working on implementing a fixed header for one of my pages in an Angular application, but I'm having some trouble getting it to work as expected. Currently, when the user expands the accordions on the page and scrolls down, the headers ...

Effortlessly uploading multiple images using Ionic 5 with Angular, leveraging Capacitor Camera and NodeJS Multer

Having trouble uploading multiple images in my Ionic Angular app and sending the correct payload to the API. Everything works fine when sending data from Postman. The backend is using Node.js with multer package for handling image uploads. How can I send ...

Having trouble with Canvas installation in NodeJS

Encountering an error after running npm install canvas and attempting to use it with: const canvas = require('canvas') npm ERR! code 1 npm ERR! path C:\Users\josep\OneDrive\Desktop\Bots\Foundation\node_m ...

React Native is throwing a TypeError because it is encountering an undefined object

React Native is throwing an error claiming Undefined is not an object when it's clearly an object!! I'm confused about what's happening. Take a look at the code snippet below. Scroll down to the render() function. You'll see the follow ...

Issues with the functionality of Angular Firebase Authentication Service

I am currently working on setting up an authentication service in Angular that will integrate with Google Firebase for a Login form. However, I have encountered an issue where including the service in the constructor of my LoginComponent prevents me from a ...