I am showing nested data in a primeng table.I have the following nested array as my api response:
{
"schoolRecords": [
{
"grade": "7",
"studentInfo": [
{
"studentName": "Lewis",
"parentInfo": [
{
"phoneNo": "63789390038",
"parentName": "Dan",
"occupation": "Lawyer"
},
{
"phoneNo": "789928901",
"parentName": "Samantha",
"occupation": "Doctor"
}
]
},
{
"studentName": "Lucy",
"parentInfo": [
{
"phoneNo": "63789390038",
"parentName": "Eric",
"occupation": "Businessman"
},
{
"phoneNo": "789928901",
"parentName": "Carly",
"occupation": "Lawyer"
}
]
}
]
},
{
"grade": "8",
"studentInfo": [
{
"studentName": "Danny",
"parentInfo": [
{
"phoneNo": "63789390038",
"parentName": "Mathew",
"occupation": "Engineer"
},
{
"phoneNo": "789928901",
"parentName": "Dory",
"occupation": "Lawyer"
}
]
},
{
"studentName": "Karen",
"parentInfo": [
{
"phoneNo": "63789390038",
"parentName": "Ross",
"occupation": "Businessman"
},
{
"phoneNo": "789928901",
"parentName": "Miley",
"occupation": "Housewife"
}
]
}
]
}
]
}
I'm trying to filter this array based on the input provided by the user. For this I am using the global filter provided by primeng. However this filter is only working when the input matches the grade. How can I filter the table based on the parent's occupation/name/phoneNo. Thanks in advance for your help.
The filter I'm currently using:
<input type="text" pInputText placeholder="search"
(input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
I tried adding a custom filter but that is not working -
filterTest(value: any) {
return this.schoolRecords.find(record => record.studentInfo.find(student => student.parentInfo.some(x => x.occupation === value)));
}
template:
<input type="text" pInputText placeholder="search"
(input)="filterTest($event.target.value)" style="width:auto">