differ supporting object Error in Angular

Question

I am working on an Angular application and I want to display a filtered list of data in my UI from the main component.

After working of the filter function, I want to store the filtered data in a similar manner as my original data but am not able to do so.

But I am getting,

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

I want the filteredEmpData to be of the same type as empData.

I surfed and got a solution to convert the object as Arrays but is there any other way, I can do that.

P.S: Absolute noob here.

Here is what I have done so far,

    export class AppComponent {
  // tslint:disable-next-line:no-inferrable-types
  title: string = 'Birthday App';
  tDate: any = new Date();
  tMonth: number = this.tDate.getMonth() + 1;
  tDay: number = this.tDate.getDate();
  empData: IEmpdatatype[] = [
  {
    'name': 'Anurag Basu',
    'DOB': '1996-09-10',
    'email': '[email protected]',
    'imageLink': 'https://qph.fs.quoracdn.net/main-thumb-314460666-200-repbvxtqtsknkwpbemcejkxjnplkcmip.jpeg'
  },
  {
    'name': 'Shubham Bhatt',
    'DOB': '1996-06-26',
    'email': '[email protected]',
    'imageLink': 'https://qph.fs.quoracdn.net/main-thumb-314460666-200-repbvxtqtsknkwpbemcejkxjnplkcmip.jpeg'
  }
];
filteredEmpData: IEmpdatatype = this.check();
check(): IEmpdatatype {
    // console.log(typeof(this.empData));
    // tslint:disable-next-line:prefer-const
    let monthStr: string = this.tMonth.toString();
    let dayStr: string = this.tDay.toString();
    if ( monthStr.length === 1 ) {
      monthStr = '0' + monthStr;
    }
    if ( dayStr.length === 1) {
      dayStr = '0' + dayStr;
    }
    for (let i = 0; i < this.empData.length; i++) {
      const DOBsplit: string[] = this.empData[i].DOB.split('-');
      if ( DOBsplit[1] === monthStr && DOBsplit[2] === dayStr) {
        this.filteredEmpData = this.empData[i];
      }
    }
    console.log(this.filteredEmpData);
    return this.filteredEmpData;
  }
}

App.component.html

<div class="thisMonth">
    <ul *ngFor='let filteredEmpD of filteredEmpData'>
      <li><span><img [src]='filteredEmpD.imageLink' id="img-round"></span><span>{{filteredEmpD.name}}</span><span>{{filteredEmpD.DOB}}</span><span><a type="button" href="mailto:{{filteredEmpD.email}}?Subject=Happy%20Birthday">Wishes</a></span></li>
    </ul>
  </div>

If your "filtered list" is in fact always one object, what's the point of using ngFor? You just want to display that object, so you don't need any loop. And if there are several objects you want to display, then clearly the problem is in your check method, which should return an array instead of a single object — JB Nizet
– JB Nizet, Commented Jun 26, 2018 at 7:07
No, that's just the dummy data. I'll actually be fetching the data from JSON file and there can be more data. — s4tr2
– s4tr2, Commented Jun 26, 2018 at 7:10
Then you need an array to hold that data, and the check() method should return an array. — JB Nizet
– JB Nizet, Commented Jun 26, 2018 at 7:12

Thor Jacobsen · Accepted Answer · 2018-06-26 07:08:10Z

In your method check, you're modifying this.filteredEmpData. You're setting it to a specific index of the empData property, you're not pushing to it (ie. in the end, filteredEmpData is of type IEmpdatatype, not IEmpdatatype[])

Here's a suggested refactor of the check method:

check(): IEmpdatatype[] {
    const res: IEmpdatatype[] = [];
    let monthStr: string = this.tMonth.toString();
    let dayStr: string = this.tDay.toString();
    if ( monthStr.length === 1 ) {
      monthStr = '0' + monthStr;
    }
    if ( dayStr.length === 1) {
      dayStr = '0' + dayStr;
    }
    for (let i = 0; i < this.empData.length; i++) {
      const DOBsplit: string[] = this.empData[i].DOB.split('-');
      if ( DOBsplit[1] === monthStr && DOBsplit[2] === dayStr) {
        // Push match to result
        res.push(this.empData[i]);
      }
    }
    console.log(res);
    return res;
  }
}

Prachi · Accepted Answer · 2018-06-26 07:09:18Z

2

You are assigning the object into the filteredEmpData array, instead of pushing an object into it.

So replace this

this.filteredEmpData = this.empData[i];

by this

this.filteredEmpData.push(this.empData[i]);

And don't forget to initialize the array before pushing something into it. So before the for loop initialize it as:

this.filteredEmpData = [];

edited Jun 26, 2018 at 7:09

answered Jun 26, 2018 at 7:06

Prachi

3,60421 silver badges38 bronze badges

1 Comment

Prachi Over a year ago

See the updated answer. I have mentioned it in last line.

Collectives™ on Stack Overflow

differ supporting object Error in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related