ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed in angular 11

Question

I have created function for search data in array object using angular 11.

Its showing the error while on keydown function.

while creating search function its showing console error.

in html file

<input type="text" [(ngModel)]="archivedpollSearch" placeholder="{{ 'FIFTH_ITERATION.MY_COMMUNITIES.SEARCH_ARCHIVED_POLLS' | translate}}"
        class="search-input border-0 bg-transparent" (keydown)="searchArchivePolls()">



<mat-expansion-panel class="mat-elevation-z0 panelExpansion border-top border-bottom border-right border-left" *ngFor="let archives of archivedPoll;let i= index">
        <mat-expansion-panel-header>
          <mat-panel-title translate>{{archives?.question}}</mat-panel-title>
        </mat-expansion-panel-header>
        <mat-panel-description *ngFor="let options of archives?.CM_Poll_Options;let i=index">
          <div class="radio-group widthRadio" *ngIf="options?.pollId==archives?.id">
            <label class="container poll-done">
              {{options?.pollOption}}  
              <input  type="radio" name="polls" [checked]="archives?.CM_Poll_Results[i]?.choice==options?.id && archives?.CM_Poll_Results[i].userId ==this.userId">
              <span class="checkmark"></span>
              <small>{{(options?.percentageValue | number) || 0}} %</small>
              <div [style.width]="options.percentageValue + '%' "></div>
            </label>
      </div>
    </mat-panel-description>
  </mat-expansion-panel>

In my ts file

searchArchivePolls(){  
    if(this.archivedpollSearch.length >= 1){
      this.archivedPoll.map((poll, index)=>{
        if(poll.question.includes(this.archivedpollSearch)){              
          this.archivedPoll = poll; 
          console.log(this.archivedPoll);     
        }
      })
    }else{
      this.getArchivePolls();
    }
  }

getArchivePolls function called in ngOninit

I need to use search for array object values.

Here is my server side response

[
    {
        "id": 179,
        "question": "archived poll2?",
        "communityId": 198,
        "userPollCount": 1,
        "CM_Poll_Options": [
            {
                "id": 394,
                "pollId": 179,
                "pollOption": "archived1",
                "percentageValue": "100.0000"
            },
            {
                "id": 395,
                "pollId": 179,
                "pollOption": "archived2",
                "percentageValue": "0.0000"
            },
            {
                "id": 396,
                "pollId": 179,
                "pollOption": "archived3",
                "percentageValue": "0.0000"
            },
            {
                "id": 397,
                "pollId": 179,
                "pollOption": "archived4",
                "percentageValue": "0.0000"
            }
        ],
        "CM_Poll_Results": [
            {
                "userId": 6,
                "choice": 394,
                "CM_Users": {
                    "id": 6,
                }
            }
        ]
    },
    {
        "id": 178,
        "question": "testing question for archive polls?",
        "communityId": 198,
        "userPollCount": 0,
        "CM_Poll_Options": [
            {
                "id": 392,
                "pollId": 178,
                "pollOption": "testing1",
                "percentageValue": null
            },
            {
                "id": 393,
                "pollId": 178,
                "pollOption": "testing2",
                "percentageValue": null
            }
        ],
        "CM_Poll_Results": []
    }
]

eko · Accepted Answer · 2021-05-24 08:58:52Z

1

You are trying to loop over archivedPoll with ngFor but you're assigning it to an object here:

  this.archivedPoll.map((poll, index)=>{
        if(poll.question.includes(this.archivedpollSearch)){              
          this.archivedPoll = poll; // <-- here
          console.log(this.archivedPoll);     
        }
      })

I think you're trying to create a new array from archivedPoll so this might be better:

const archivedPolls = this.archivedPoll.map((poll, index)=>{
  if(poll.question.includes(this.archivedpollSearch)){              
    return poll;     
  }
})

this.archivedPoll = archivedPolls;

edited May 24, 2021 at 8:58

answered May 24, 2021 at 8:50

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

1 Comment

manikandan Over a year ago

i have tried to do search option, if i enter testing only second object should return in my example response

Collectives™ on Stack Overflow

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed in angular 11

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related