I've been working on an Angular project and I'm trying to show a filtered list of data on my UI from the main component.
Even after implementing the filter function, I'm struggling to save the filtered data in the same format as my original data.
Unfortunately, when trying to do so, I encounter this error:
"Cannot find a differ supporting object '[object Object]' of type 'Shubham Bhatt'. NgFor only supports binding to Iterables such as Arrays.
My goal is to have the filteredEmpData match the structure of empData.
I did some research and found a solution that involves converting the object into Arrays. However, I'm wondering if there's another way to achieve this.
P.S: Total beginner here.
Here's my progress 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': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9eecfff0faf1f3fbf3fff7f2def9f3fff7f2b0fdf1f3">[email protected]</a>',
'imageLink': 'https://qph.fs.quoracdn.net/main-thumb-314460666-200-repbvxtqtsknkwpbemcejkxjnplkcmip.jpeg'
},
{
'name': 'Shubham Bhatt',
'DOB': '1996-06-26',
'email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8f9391998e9d9298939199919d9590bc9b919d9590d29f9391">[email protected]</a>',
'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>