Angular data binding with an object instead of an array list

Question

Angular data binding with an object instead of an array list

Currently, I am implementing Angular and attempting to iterate through an object.

Data in JSON format

employee {"fName":"mike","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebb3b3b3b3b3b3b3b3ab83849f868a8287c5888486">[email protected]</a>"}

Definition of interface

export interface Employee {
fName:string
email:string

}

Component Implementation

    iEmployee: Employee[];
getITIMDATA() {
        this._ersaDet.getITIMData(this.ersaGlobalUID)
            .subscribe(
            data => {
                this.iEmployee = data;
            },
            error => 'GetAllCostCenetrs Method: ');

    }

HTML Template

 <div *ngFor="let itim of iEmployee">
        <div class="col-lg-12">
            <div class="row">
                <div class="form-group">
                    <label class="control-label">Name</label>
                    <input type="text"  name="Name" class="form-control" id="ntName" [(ngModel)]="itim.fName">
                </div>
            </div>
        </div>
 <div>

A common error encountered while running the code is:

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

angular typescript angularjs-directive

Answer 1

Answer №1

Here's the code snippet within your subscribe function:

data => {
    this.iEmployee = data;
}

What exactly is stored in data? And have you tried printing the value of this.iEmplyoee after it has been assigned?

The TypeScript compiler seems to be indicating that it's not an array of objects.

Could you provide a simple example solution? Maybe on a platform like Stackblitz or Plunkr.

LATEST UPDATE

It appears that you're expecting only one record and not an array. You could either:

Remove the ngFor
Modify the code inside the subscribe method to something similar to

data => { this.iEmployee = [data]; }

By the way, it's quite odd that you aren't receiving any errors or warnings from the compiler when attempting to assign a single object to an array of objects. Did you perhaps make changes to the configuration file tsconfig recently?

Answer 2

Here's the code snippet within your subscribe function:

data => {
    this.iEmployee = data;
}

What exactly is stored in data? And have you tried printing the value of this.iEmplyoee after it has been assigned?

The TypeScript compiler seems to be indicating that it's not an array of objects.

Could you provide a simple example solution? Maybe on a platform like Stackblitz or Plunkr.

LATEST UPDATE

It appears that you're expecting only one record and not an array. You could either:

Remove the ngFor
Modify the code inside the subscribe method to something similar to

data => { this.iEmployee = [data]; }

By the way, it's quite odd that you aren't receiving any errors or warnings from the compiler when attempting to assign a single object to an array of objects. Did you perhaps make changes to the configuration file tsconfig recently?

Answer 3

Answer №2

It is recommended to format your response as an array in JSON format instead of just a single object. Even if you only have one object, it is best practice to return it within an array.

Answer 4

It is recommended to format your response as an array in JSON format instead of just a single object. Even if you only have one object, it is best practice to return it within an array.

Angular data binding with an object instead of an array list

Answer №1

Answer №2

Similar questions

An issue occurred: Unable to access the 'login' property because of a TypeError

What is the reason the 'Add' type does not meet the 'number' constraint?

Ways to display the SearchFilter textbox in an Angular Multiselect Dropdown, even when there are no items loaded

Tips for handling TypeScript error TS2339 - Property does not found on type

Utilize Angular Material's Progress Bar within your Snack Bar component

In Ionic 2, any modifications made to the data model will only be reflected in the user interface after there is

Guide to accessing the request object within the entity class in NestJS

TS-2304 Error - 'Iterable' not found in TypeScript when trying to import 'jquery' into a '.ts' file

Could you specify the type of useFormik used in formik forms?

Determine the conditional type based on the type of another variable

serve angular6 application using fastify

The issue of cyclical dependencies in Ionic 2 and Angular 2

Error message: Issue with TypeScript and cleave.js - 'rawValue' property is not found on type 'EventTarget & HTMLInputElement'

How can I retrieve header values in the canActivate function in Angular?

Version 4.0 of d3 introduces an import statement that provides a __moduleExports wrapper

Angular - struggling to properly sort incoming data based on property with getter and setter functions

Validation of dynamic fields in Angular 2 forms

manipulating a dynamic value within ngModel in Angular 2

Transform an array of Boolean values into a string array containing only the values that are true

Guide on changing the color of the selected item in mat-nav-list within angular 6