如何根据表单筛选API返回的对象属性数据

你之前把formData转成值数组的做法丢失了字段对应关系，导致无法精准匹配多个条件。正确的做法是保留字段与值的对应关系，再逐一验证每个条件是否同时满足。

1. 正确清洗表单数据 #

先对formData做清洗，保留键值对结构，过滤掉空字段，同时把值转小写：

const formData = {
    "firstName": "Chris",
    "postcode": "SA11 3FJ"
};

// 清洗表单数据：保留非空字段，值转小写
const cleanedForm = Object.fromEntries(
    Object.entries(formData)
        .filter(([key, value]) => value !== null && value !== '')
        .map(([key, value]) => [key, value.toLowerCase()])
);

清洗后得到的cleanedForm为{firstName: 'chris', postcode: 'sa11 3fj'}，完整保留了字段与目标值的对应关系。

2. 使用filter实现多条件同时匹配 #

遍历API返回的数据，对每个对象检查cleanedForm中的所有条件是否全部满足：

const apiData = [
    {
        "firstName": "chris",
        "lastName": "kundill",
        "postcode": "sa11 3fj"
    },
    {
        "firstName": "sam",
        "lastName": "white",
        "postcode": null
    },
    {
        "firstName": "john",
        "lastName": "davies",
        "postcode": "sa11 3fj"
    },
    {
        "firstName": "jane",
        "lastName": "davies",
        "postcode": "sa11 3fj"
    },
    {
        "firstName": "maria",
        "lastName": "davies",
        "postcode": "sa11 3fj"
    },
    {
        "firstName": "nutter",
        "lastName": "dave",
        "postcode": "sa11 3fj"
    },
    {
        "firstName": "donna",
        "lastName": "duggie",
        "postcode": "sa11 3fj"
    }
];

const filteredData = apiData.filter(item => {
    // 验证所有表单条件是否同时匹配
    return Object.entries(cleanedForm).every(([key, targetValue]) => {
        // 处理字段值为null的情况，避免转换小写时报错
        const itemValue = item[key]?.toLowerCase() || '';
        return itemValue === targetValue;
    });
});

console.log(filteredData);
// 输出结果：[{firstName: 'chris', lastName: 'kundill', postcode: 'sa11 3fj'}]

关键逻辑说明 #

• Object.entries(cleanedForm).every(...)确保只有全部满足表单条件的对象才会被保留，彻底避免只满足单个条件的结果混入。
• 针对API数据中字段为null的情况做了兼容处理，避免转换小写时出现报错，同时这类值也会因为无法匹配目标值被过滤。
• 保留字段与值的对应关系是解决问题的核心，之前的数组方式无法区分值对应的字段，导致筛选逻辑偏离预期。

内容的提问来源于stack exchange，提问作者i-am-niall