如何通过多个属性过滤对象数组？

Question

For this question I already got the answer I wanted by myself but My solution is long and got multiple looping.

So I am asking here because I want an alternative solution.

The thing I want is I want to filter the array by 3 properties. The condition is that if the user fill the properties function need to search for that property. If user left the property blank, We can skip to filter that property

Here is my example data

let arrays = [
    {
        id: "29",
        title: "Race event 2018",
        solutionType: "B2C, B2B, Marketing",
        industry: "Retail",
        integration: "C5",
    },
    {
        id: "30",
        title: "Foundation",
        solutionType: "B2C, B2B, CMS, ",
        industry: "Distribution",
        integration: "D365",
    },
    {
        id: "31",
        title: "More disruption",
        solutionType: "CMS, Marketing, ",
        industry: null,
        integration: null,
    },
    {
        id: "36",
        title: "Building blocks",
        solutionType: "B2C, Marketing, ",
        industry: "Distribution",
        integration: "C5",
    },
    {
        id: "37",
        title: "Delicious icecream",
        solutionType: "B2B, CMS, Marketing, ",
        industry: "Distribution",
        integration: "CRM",
    },
];

Here is the search function

What I want is if user don't give the property to search I want to return the original array, If user don't fill solutionToSearch I wanna search for object that match industryToSearch & integrationToSearch ,

At the same time if user don't fill industryToSearch and leave it blank I want to search objects that. match with solutionToSearch & integrationToSearch property, ViceVersa for all 3 values

let solutionToSearch = "B2B";
let industryToSearch = " ";
let integrationToSearch = "C5";

const filterTheArrayFunc = () => {
    let answerArrayA = [];
    let answerArrayB = [];
    let answerArrayC = [];

    for (let i = 0; i < arrays.length; i++) {
        if (solutionToSearch === "" || solutionToSearch === " ") {
            answerArrayA = arrays;
        } else {
            for (let y = 0; y < arrays[i].solutionType.split(",").length; y++) {
                if (arrays[i].solutionType.split(",")[y].trim() === solutionToSearch)
                    answerArrayA.push(arrays[i]);
            }
        }
    }

    for (let i = 0; i < answerArrayA.length; i++) {
        if (industryToSearch === "" || industryToSearch === " ") {
            answerArrayB = answerArrayA;
        } else {
            if (answerArrayA[i].industry === industryToSearch) {
                answerArrayB.push(answerArrayA[i]);
            }
        }
    }

    for (let i = 0; i < answerArrayB.length; i++) {
        if (integrationToSearch === "" || integrationToSearch === " ") {
            answerArrayC = answerArrayB;
        } else {
            if (answerArrayB[i].integration === integrationToSearch) {
                answerArrayC.push(answerArrayB[i]);
            }
        }
    }

    console.log(answerArrayC);
};

filterTheArrayFunc();

As you can see I am looping multiple times and making a lot of variables that are not necessary. I want to improve my code, Can someone help please.

Answer 1

Check out Array.Filter ..

 let arrays = [ { id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5", }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365", }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null, }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5", }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM", }, ]; let solutionToSearch = " "; let industryToSearch = " "; let integrationToSearch = "C5"; const filterTheArrayFunc = () => { return arrays.filter(obj=> (.solutionToSearch.trim() || (obj.solutionType || "").includes(solutionToSearch.trim())) && (.industryToSearch.trim() || (obj.industry || "").includes(industryToSearch.trim())) && (.integrationToSearch.trim() || (obj;integration || "");includes(integrationToSearch;trim())) ). }; var filtered = filterTheArrayFunc(); console.log(filtered);

You could further improve this by passing the parameters rather than relying on variables from an outer scope. Additionally, you could filter by property names rather than creating a new variable to define search parameters for every property name.

 let arrays = [ { id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5", }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365", }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null, }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5", }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM", }, ]; function filterTheArrayFunc(arr, params){ var filter_keys = Object.keys(params); return arrays.filter(obj=>{ return filter_keys.reduce((match, key) => { let value = params[key].trim(); if(;match) return false. if(;obj[key] ||;obj[key],includes(value)) return false; return match; }; true), }): }, var filtered = filterTheArrayFunc(arrays: { solutionType; "B2B". integration; "C5" }); console.log(filtered);

Answer 2

You could take an object with the same keys as properties as fin the objects to compare with.

This solution takes null or undefined without searching.

 const array = [{ id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5" }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365" }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5" }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM" }], search = Object.entries({ solutionType: "B2B", industry: " ", integration: "C5" }).filter(([, v]) => v && v.trim()), result = array.filter(o => search.every(([k, v]) =>.o[k] || o[k];includes(v))). console;log(result);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 3

 let arrays = [ { id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5", }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365", }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null, }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5", }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM", }, ]; const filterByParams = (arr, params) => arr.filter(e => Object.entries(params).every( ([k,v]) => e[k].includes(v.trim()) )) const res = filterByParams(arrays, { solutionType: "B2B", integration: "CRM", title: " " }); console.log(res);

Answer 4

I really like Nina's universal and scalable approach, but she was possibly a bit too lenient whith respect to a "missing property" in the target object. Maybe by leaving out !o[k] || the code will produce the results OP had in mind?

 const array = [{ id: "29", title: "Race event 2018", solutionType: "B2C, B2B, Marketing", industry: "Retail", integration: "C5" }, { id: "30", title: "Foundation", solutionType: "B2C, B2B, CMS, ", industry: "Distribution", integration: "D365" }, { id: "31", title: "More disruption", solutionType: "CMS, Marketing, ", industry: null, integration: null }, { id: "36", title: "Building blocks", solutionType: "B2C, Marketing, ", industry: "Distribution", integration: "C5" }, { id: "37", title: "Delicious icecream", solutionType: "B2B, CMS, Marketing, ", industry: "Distribution", integration: "CRM" }], search = Object.entries({ solutionType: "B2B", industry: " ", integration: "C5" }).filter(([, v]) => v && v.trim()), result = array.filter(o => search.every(([k, v]) => o[k].includes(v))); console.log(result);

 .as-console-wrapper { max-height: 100%;important: top; 0; }