tableData 是 PDO 对象的数组。每个 PDO 可以有 0 个或多个倡导 (pdo_advocacies)。每个倡导可以有 0 个或多个程序 (pdo_programs)。像这样：
//array of PDO object
[
{
id: 1,
pdo_currency: "PHP",
name: "Gemango",
abbreviation: "Gemango",
dt_founded: "May. 02, 2024",
dt_created_at: "Jan. 01, 1970",
//array of PDO advocacies
pdo_advocacies: [
{
id: 1,
advocacy: "PDO Operations",
pdo_id: 1,
//array of PDO programs
pdo_programs: [
{
id: 6,
program: "PDO Budget",
pdo_advocacy_id: 1,
pdo_id: 1,
admin_beneficiary_category_id: 2,
beneficiary_category: {
id: 2,
name: "elders",
},
program_priority: {
id: 295,
name: "High",
},
program_category: null,
proposed_date: null,
funding_needs: "20000.00",
admin_beneficiary_category: {
id: 2,
category: "Children",
},
pdo_program_locations: [
{
id: 6,
pdo_program_id: 6,
location: {
id: 3,
name: "CEBU CITY, CEBU, PHILIPPINES",
},
funding_needs_location: "0.00",
unit_of_item: null,
num_of_items: 0,
num_of_beneficiaries: 0,
},
],
},
],
},
{
id: 2,
advocacy: "Unrestricted",
pdo_id: 1,
pdo_programs: [
{
id: 1,
program: "Unrestricted Funds",
pdo_advocacy_id: 2,
pdo_id: 1,
admin_beneficiary_category_id: null,
beneficiary_category: null,
program_priority: null,
program_category: null,
proposed_date: null,
funding_needs: "0.00",
admin_beneficiary_category: null,
pdo_program_locations: [
{
id: 1,
pdo_program_id: 1,
location: {
id: 1,
name: "Main",
},
funding_needs_location: "0.00",
unit_of_item: null,
num_of_items: 0,
num_of_beneficiaries: 0,
},
],
},
],
},
],
},
];选定的选项
[
{
"id": 2,
"name": "Children"
}
]这应该过滤并仅返回 admin_beneficiary_category.category 为“儿童”的 PDO、宣传和计划。
过滤器实现
this.filteredTableData = this.tableData.filter((pdo) => {
return pdo.pdo_advocacies.some((advocacy) => {
return advocacy.pdo_programs.some((program) => {
return selectedOptions.some((option) => {
// Check if admin_beneficiary_category is null or undefined
if (program.admin_beneficiary_category === null || program.admin_beneficiary_category === undefined) {
// Check if the option name is 'null'
return option.name === 'null';
}
// Compare the program category name with the selected option name
return option.name === program.admin_beneficiary_category.category;
});
});
});
});实际产量
[
{
"id": 1,
"pdo_currency": "PHP",
"name": "Gemango",
"abbreviation": "Gemango",
"dt_founded": "May. 03, 2024",
"dt_created_at": "Jan. 01, 1970",
"pdo_advocacies": [
{
"id": 1,
"advocacy": "PDO Operations",
"pdo_id": 1,
"pdo_programs": [
{
"id": 6,
"program": "PDO Budget",
"pdo_advocacy_id": 1,
"pdo_id": 1,
"admin_beneficiary_category_id": 2,
"beneficiary_category": {
"id": 2,
"name": "elders"
},
"program_priority": {
"id": 295,
"name": "High"
},
"program_category": null,
"proposed_date": null,
"funding_needs": "20000.00",
"admin_beneficiary_category": {
"id": 2,
"category": "Children"
},
"pdo_program_locations": [
{
"id": 6,
"pdo_program_id": 6,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "0.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
}
]
},
{
"id": 2,
"advocacy": "Unrestricted",
"pdo_id": 1,
"pdo_programs": [
{
"id": 1,
"program": "Unrestricted Funds",
"pdo_advocacy_id": 2,
"pdo_id": 1,
"admin_beneficiary_category_id": null,
"beneficiary_category": null,
"program_priority": null,
"program_category": null,
"proposed_date": null,
"funding_needs": "0.00",
"admin_beneficiary_category": null,
"pdo_program_locations": [
{
"id": 1,
"pdo_program_id": 1,
"location": {
"id": 1,
"name": "Main"
},
"funding_needs_location": "0.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
}
]
},
{
"id": 3,
"advocacy": "Scholarship",
"pdo_id": 1,
"pdo_programs": [
{
"id": 2,
"program": "Scholarship Program for the Carm.O.L. Sisters",
"pdo_advocacy_id": 3,
"pdo_id": 1,
"admin_beneficiary_category_id": 4,
"beneficiary_category": {
"id": 2,
"name": "elders"
},
"program_priority": null,
"program_category": null,
"proposed_date": null,
"funding_needs": "50000.00",
"admin_beneficiary_category": {
"id": 4,
"category": "Elderly"
},
"pdo_program_locations": [
{
"id": 2,
"pdo_program_id": 2,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "0.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
}
]
},
{
"id": 10,
"advocacy": "Pastoral Care",
"pdo_id": 1,
"pdo_programs": [
{
"id": 7,
"program": "Program 1",
"pdo_advocacy_id": 10,
"pdo_id": 1,
"admin_beneficiary_category_id": 2,
"beneficiary_category": {
"id": 2,
"name": "elders"
},
"program_priority": {
"id": 295,
"name": "High"
},
"program_category": {
"id": 276,
"name": "Grant"
},
"proposed_date": "2024-04-01 16:00:00",
"funding_needs": "100000.00",
"admin_beneficiary_category": {
"id": 2,
"category": "Children"
},
"pdo_program_locations": [
{
"id": 7,
"pdo_program_id": 7,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "50000.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
},
{
"id": 10,
"pdo_program_id": 7,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "50000.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
},
{
"id": 13,
"program": "Test",
"pdo_advocacy_id": 10,
"pdo_id": 1,
"admin_beneficiary_category_id": 3,
"beneficiary_category": {
"id": 7,
"name": "children"
},
"program_priority": null,
"program_category": {
"id": 276,
"name": "Grant"
},
"proposed_date": null,
"funding_needs": "1000.00",
"admin_beneficiary_category": {
"id": 3,
"category": "Community"
},
"pdo_program_locations": [
{
"id": 17,
"pdo_program_id": 13,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "0.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
},
{
"id": 14,
"program": "Test Program",
"pdo_advocacy_id": 10,
"pdo_id": 1,
"admin_beneficiary_category_id": 3,
"beneficiary_category": {
"id": 7,
"name": "children"
},
"program_priority": {
"id": 297,
"name": "Low"
},
"program_category": {
"id": 276,
"name": "Grant"
},
"proposed_date": "2024-04-01 16:00:00",
"funding_needs": "100000.00",
"admin_beneficiary_category": {
"id": 3,
"category": "Community"
},
"pdo_program_locations": [
{
"id": 18,
"pdo_program_id": 14,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "0.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
},
{
"id": 19,
"pdo_program_id": 14,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "0.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
},
{
"id": 15,
"program": "Hello World",
"pdo_advocacy_id": 10,
"pdo_id": 1,
"admin_beneficiary_category_id": null,
"beneficiary_category": {
"id": 7,
"name": "children"
},
"program_priority": {
"id": 297,
"name": "Low"
},
"program_category": null,
"proposed_date": "2024-04-07 16:00:00",
"funding_needs": "1000.00",
"admin_beneficiary_category": null,
"pdo_program_locations": [
{
"id": 20,
"pdo_program_id": 15,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "0.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
}
]
}
]
}
]预期输出：
[
{
"id": 1,
"pdo_currency": "PHP",
"name": "Gemango",
"abbreviation": "Gemango",
"dt_founded": "May. 03, 2024",
"dt_created_at": "Jan. 01, 1970",
"pdo_advocacies": [
{
"id": 1,
"advocacy": "PDO Operations",
"pdo_id": 1,
"pdo_programs": [
{
"id": 6,
"program": "PDO Budget",
"pdo_advocacy_id": 1,
"pdo_id": 1,
"admin_beneficiary_category_id": 2,
"beneficiary_category": {
"id": 2,
"name": "elders"
},
"program_priority": {
"id": 295,
"name": "High"
},
"program_category": null,
"proposed_date": null,
"funding_needs": "20000.00",
"admin_beneficiary_category": {
"id": 2,
"category": "Children"
},
"pdo_program_locations": [
{
"id": 6,
"pdo_program_id": 6,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "0.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
}
]
},
{
"id": 10,
"advocacy": "Pastoral Care",
"pdo_id": 1,
"pdo_programs": [
{
"id": 7,
"program": "Program 1",
"pdo_advocacy_id": 10,
"pdo_id": 1,
"admin_beneficiary_category_id": 2,
"beneficiary_category": {
"id": 2,
"name": "elders"
},
"program_priority": {
"id": 295,
"name": "High"
},
"program_category": {
"id": 276,
"name": "Grant"
},
"proposed_date": "2024-04-01 16:00:00",
"funding_needs": "100000.00",
"admin_beneficiary_category": {
"id": 2,
"category": "Children"
},
"pdo_program_locations": [
{
"id": 7,
"pdo_program_id": 7,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "50000.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
},
{
"id": 10,
"pdo_program_id": 7,
"location": {
"id": 3,
"name": "CEBU CITY, CEBU, PHILIPPINES"
},
"funding_needs_location": "50000.00",
"unit_of_item": null,
"num_of_items": 0,
"num_of_beneficiaries": 0
}
]
}
]
}
]
}
]完整代码：https://stackblitz.com/edit/stackblitz-starters-azu5d2?file=src%2Fmain.ts
我终于从这个https://stackoverflow.com/a/53115809/12438210帖子中得到了提示。
基本上，我需要使用嵌套映射和展开运算符的组合，而不是嵌套一些并仅过滤最深级别的对象。
this.filteredTableData = this.tableData
.map(pdo => {
// Filter pdo_advocacies
const filteredAdvocacies = pdo.pdo_advocacies
.map(advocacy => {
// Filter pdo_programs for each advocacy
const filteredPrograms = advocacy.pdo_programs.filter(program => {
return selectedOptions.some(option => {
if (!program.admin_beneficiary_category) {
return option.name === 'null';
}
return option.name === program.admin_beneficiary_category.category;
});
});
// Return advocacy only if it has filtered programs
return {
...advocacy,
pdo_programs: filteredPrograms,
};
})
.filter(advocacy => advocacy.pdo_programs.length > 0); // Filter out advocacies with no programs
// Return pdo only if it has filtered advocacies
return {
...pdo,
pdo_advocacies: filteredAdvocacies,
};
})
.filter(pdo => pdo.pdo_advocacies.length > 0); // Filter out pdo with no advocacies