Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

Question

Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

I am facing an error that says "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." I am trying to create a Notification list but I can't figure out what mistake I have made.

HTML

<ng-container *ngIf="notificationModal">
      <div class="side-panel__notif-container">
        <div class="side-panel__notify-header">
        <span class="side-panel__usr-profile-close" (click)="clkNotifcationPnl()">
          <fa-icon [icon]="faClose"></fa-icon>
        </span>
        <span class="side-panel__usr-noti-hdr">Notifications</span><br>
      </div>
      <div class="side-panel__notify-body">
        <div class="side-panel__user-notif-cont">
          <div class="drop-content">
         <ul class="mt-2 list-group notify-contents">
          <li *ngFor="let items of notify">
            <div class="col-md-3 col-sm-3 col-xs-3">
              <div class="notify-img">
                <span [ngStyle]="{'background-image': loadProfilePic()}" class="side-panel__user-notif-img fa"></span>
              </div>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9 pd-l0">{{items.notifyFromName}}
             <p>{{items.notifyMessage}}</p> 
            <p class="time">{{items.notifyDate}}</p>
            </div>
          </li>

        </ul>
        </div>

        </div>
      </div>
      </div>
    </ng-container>

Component

public onClickUserNotif() {
   this.headerService.isLoading = true;
    return this.commonService.getNotificationList().subscribe((res) => {
      if (res['status'].code === 0) {
        this.headerService.isLoading = false;
        let notify = res['notification']
        if(notify.length > 0) {
          this.notificationModal = true;

          console.log(notify);


        }

      }
    });

  }

And this value is displayed when I console.log(notify)

https://i.stack.imgur.com/M9m0h.png

angular typescript notifications

Answer 1

Answer №1

let notify = res['notification']

This code creates block level scope, which means the local scope will not reflect this value. Angular binds to local scope, not block level scope. Therefore, you need to bind a local variable outside of that function.

class ComponentName {
    notify: any[];
    // ...
   onClickUserNotif() {
       // ...
       this.notify = res['notification'];
   }
}

Edit:

Here are some key points:

Before my suggestion, there was no locally scoped notify.
Angular does not throw an error on a null value.
Creating the locally scoped notify did not resolve the issue.

Therefore, the only possible solutions or issues I see are:

You might be looking at HTML that does not correspond to the .ts file you are working with, or
The res['notification'] is being altered in your commonService and the notify variable is reflecting those changes.

Sidenote:

In your ngOnInit function, you are subscribing to the same service as in your other function. It seems unnecessary to resubscribe.
Although you use takeWhile() to manage active subscriptions, it only affects the outer subscription, not the inner one.

Answer 2

let notify = res['notification']

This code creates block level scope, which means the local scope will not reflect this value. Angular binds to local scope, not block level scope. Therefore, you need to bind a local variable outside of that function.

class ComponentName {
    notify: any[];
    // ...
   onClickUserNotif() {
       // ...
       this.notify = res['notification'];
   }
}

Edit:

Here are some key points:

Before my suggestion, there was no locally scoped notify.
Angular does not throw an error on a null value.
Creating the locally scoped notify did not resolve the issue.

Therefore, the only possible solutions or issues I see are:

You might be looking at HTML that does not correspond to the .ts file you are working with, or
The res['notification'] is being altered in your commonService and the notify variable is reflecting those changes.

Sidenote:

In your ngOnInit function, you are subscribing to the same service as in your other function. It seems unnecessary to resubscribe.
Although you use takeWhile() to manage active subscriptions, it only affects the outer subscription, not the inner one.

Answer 3

Answer №2

It is highly recommended to err on the side of caution and ensure that you always maintain this array:

class ComponentName {
    notify: any[] = []; // initializing an empty array
    // ...
   onClickUserNotif() {
       // ...
       this.notify = res['notification'];
   }
}

// When referencing the properties in the template, use the ? to handle potential absence of properties: 
            <div class="col-md-9 col-sm-9 col-xs-9 pd-l0">{{items?.notifyFromName}}
             <p>{{items?.notifyMessage}}</p> 
            <p class="time">{{items?.notifyDate}}</p>
            </div>

Answer 4

It is highly recommended to err on the side of caution and ensure that you always maintain this array:

class ComponentName {
    notify: any[] = []; // initializing an empty array
    // ...
   onClickUserNotif() {
       // ...
       this.notify = res['notification'];
   }
}

// When referencing the properties in the template, use the ? to handle potential absence of properties: 
            <div class="col-md-9 col-sm-9 col-xs-9 pd-l0">{{items?.notifyFromName}}
             <p>{{items?.notifyMessage}}</p> 
            <p class="time">{{items?.notifyDate}}</p>
            </div>

Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

Answer №1

This code creates block level scope, which means the local scope will not reflect this value. Angular binds to local scope, not block level scope. Therefore, you need to bind a local variable outside of that function.

Here are some key points:

Therefore, the only possible solutions or issues I see are:

Sidenote:

Answer №2

Similar questions

Greetings, I am currently using Angular version 3n 2 rc5 and I am hoping to execute a function called "change" that will perform two separate functions

When a property is removed from a variable in an Angular Component, it can impact another variable

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

«IntelliJ: Effortless Live Reload with Spring Boot and Angular»

The specified 'IArguments' type does not qualify as an array type

No search results found for Mongoose text search query

Encountering a "No such file" error when attempting to execute an Angular application as a

Misunderstanding the concept of always being right

Ensuring User Authentication in Angular with Firebase: How to Dynamically Hide the Login Link in Navigation Based on User's Login Status

The functionality of ZoneAwarePromise has been modified within the Meteor framework

How can I call a global function in Angular 8?

Using angular 7 to apply a dynamic CSS class on a span element

What is the correct approach for detecting object collisions in Phaser 3?

Unveiling the magic behind using jasmine to spy on a generic

Utilizing the dialogue feature within Angular 6

The form doesn't seem to be functioning properly when I incorporate the formgroup and service within the ngOnInit() method

Measuring the height of an element within its parent component using Angular 4

Is it possible to modify the CSS styling in React using the following demonstration?

Is it possible to categorize a JSON object based on its properties and then count the occurrences of each property within

How to upload files from various input fields using Angular 7