Question

我正在建立一个房地产网站，用户可以在其中应用过滤器。我想拥有的过滤条件之一是该酒店是否有阳台，屋顶露台和花园。

因此，当我仅选中一个复选框（阳台）时，我想显示带有阳台的所有属性。但是当我选中两个复选框（例如，花园和阳台）时，我只想渲染具有这些特定品质的属性，即同时具有花园和阳台的属性。

我有一个非常复杂且难以维护的解决方案。目前，我只有3个复选框，但是如果我再添加5个又该怎么办？该代码将变得非常低效，必须重新编码所有内容。

这是我的“复杂”解决方案：

var filters = {
 balcony: false,
 garden: false,
 roofTerrace: false
};

const checkboxFilter = plotAreaFilter.filter((item) => {
    // If only Balcony is checked
    if (filters.balcony && !filters.roofTerrace & !filters.garden) {
        if (item.balcony) {
            return true
        }
    }
    // If both Balcony and Roof Terrace is checked
    else if (filters.balcony && filters.roofTerrace & !filters.garden) {
        if (item.balcony && item.roofTerrace) {
            return true
        }
    }
    // If all three Balcony, Roof Terrace and Garden is checked
    else if (filters.balcony && filters.roofTerrace & filters.garden) {
        if (item.balcony && item.roofTerrace && item.garden) {
            return true
        }
    }
    // If only Roof Terrace is checked 
    else if (!filters.balcony && filters.roofTerrace & !filters.garden) {
        if (item.roofTerrace) {
            return true
        }
    }
    // If only Garden is checked
    else if (!filters.balcony && !filters.roofTerrace & filters.garden) {
        if (item.garden) {
            return true
        }
    }

    // If both Roof Terrace and Garden is checked
    else if (!filters.balcony && filters.roofTerrace & filters.garden) {
        if (item.roofTerrace && item.garden) {
            return true
        }
    }

    // If only Balcony and Garden is checked 
    else if (filters.balcony && !filters.roofTerrace & filters.garden) {
        if (item.balcony && item.garden) {
            return true
        }
    } else {
        return true
    }
})
return checkboxFilter;

我真的希望有一个更好的解决方案

Answer 1

您可以获取条目并根据给定值检查所有条目。

var filters = { balcony: false, garden: true, roofTerrace: true },
    wanted = Object.entries(filters), // [['balcony', false], ['garden', true], ['roofTerrace', true]]
    checkboxFilter = plotAreaFilter.filter(item => wanted.every(([k, v]) => item[k] === v));

Answer 2

您可以尝试关注

对于@PreAuthorize("not hasRole('THIRD_PARTY_ROLE')")数组中的每个项目，请执行以下操作
在每个plotAreaFilter条件下进行检查，如果每个条件都为true，则
未应用过滤器，或者如果应用了过滤器，则item的对应值为true

filter

Array.every和Object.entries

供参考

根据多个复选框条件过滤数组

2 个答案: