Angular : Map error: NgFor only supports binding to Iterables such as Arrays

Question

I am subscribing to an obserable to get data which works fine in angular 8. I need to format the date when using mapping I get error saying

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

So I believe adding the map operator and changed the return type. I am not sure whats wrong in the way that i have implemented the map. Could somebody let me know ?

export interface IPersonNote {
    id: number;
    personId: number;
    note: string;
    authorId: number;
    authorName: string;
    fileName: string;
    mimeType: string;
    alias: string;
    createdBy: string;
    createdDate: Date;
}

Original method

import { map } from 'rxjs/operators';
public personNotes: IPersonNote;

   loadPersonNotes() {
        this.isCurrentUser = this.id !== this.userService.getCurrentUser().id;
        this.userService.getPersonNote(this.id)
          .subscribe((x: IPersonNote) => {

            this.personNotes = x;
          });
      }

Modified method

import { map } from 'rxjs/operators';
public personNotes: IPersonNote;

loadPersonNotes() {
    this.isCurrentUser = this.id !== this.userService.getCurrentUser().id;
    this.userService.getPersonNote(this.id)
      .pipe(map(note => <any>{
        createdDate: format(note.createdDate, 'Do MMM YYYY'),
      }))
      .subscribe((x: IPersonNote) => {

        this.personNotes = x;
      });
  }

UI

<div *ngIf="personNotes">
<div class="portlet-body">
    <ul class="tier-history">
      <li *ngFor="let note of personNotes">
        <span class="tier-title"> {{ note.authorName }} </span>
        <span class="tier-dates">
            {{ note.created }} 
        </span>
        <span class="tier-title"> {{ note.note }} </span>
      </li>
    </ul>
  </div>
</div>

Service

public getPersonNote = (id: number): Observable<IPersonNote> =>
this.http.get<IPersonNote>(`${this.baseUrl}person-note/${id}`)

IPersonNote is just a struct, not iterable. Why your variable use plural pesonNotes while the type is singular IPersonNote? Why do you want to do ngFor over a struct? It's just 1 instance of note. — Alexander Trakhimenok
– Alexander Trakhimenok, Commented Jan 8, 2020 at 11:13
personNotes is an object, not an array, therefore you are seeing the error...you need to use *ngFor on an array, not an object. — ViqMontana
– ViqMontana, Commented Jan 8, 2020 at 11:14
Nope. My existing method was returning more than one record and it was displaying correctly. Its only after the map that i am getting this error — Tom
– Tom, Commented Jan 8, 2020 at 11:17
declare personNotes as array ex: public personNotes: IPersonNote[]; and in subscribe .. .subscribe((x: IPersonNote[]) => { . it will work — Akhil Naidu
– Akhil Naidu, Commented Jan 8, 2020 at 11:28
ok but how do i use the map to convert the date format. If you see my post in the modified code section — Tom
– Tom, Commented Jan 8, 2020 at 11:30

Alexander Trakhimenok · Accepted Answer · 2020-01-08 11:16:41Z

2

You method returns wrong data.

It should be like this (pay attention to the type of variable in subscribe):

   public personNotes: IPersonNote[]; // Not a single but few notes (or none)

   loadPersonNotes() {
        this.isCurrentUser = this.id !== this.userService.getCurrentUser().id;
        this.userService.getPersonNotesByUserId(this.id)
          .subscribe((personNotes: IPersonNote[]) => {

            this.personNotes = personNotes;
          });
   }

answered Jan 8, 2020 at 11:16

Alexander Trakhimenok

6,3282 gold badges31 silver badges53 bronze badges

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

9 Comments

Tom Over a year ago

Considering that I have changed the type to array, how do i map to change the date format.

Tom Over a year ago

I am getting the error mentioned above when i am using the map for example .pipe(map(note => <any>{ createdDate: format(note[0].createdDate, 'Do MMM YYYY'), }))

Tom Over a year ago

I technically need to change every date field in the records to format in the map not just the first one.

Tom Over a year ago

Also to prove that it works i commented out the map statement and removed the array notation and i am able to render all the records using ngFor

Tom Over a year ago

I have updated the post to include my service as well.

|

Collectives™ on Stack Overflow

Angular : Map error: NgFor only supports binding to Iterables such as Arrays

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related