web-dev-qa-db-ja.com

JavaScript複数条件配列フィルター

複数の条件に基づく配列検索をまとめる手助けが必要です。さらに、すべての条件は条件付きです。つまり、これらの条件でフィルタリングする必要がある場合とない場合があります。私が持っているもの：

フィルタリングするオブジェクトの配列：

var data = [{
    "_id" : ObjectId("583f6e6d14c8042dd7c979e6"),
    "transid" : 1,
    "acct" : "acct1",
    "transdate" : ISODate("2012-01-31T05:00:00.000Z"),
    "category" : "category1",
    "amount" : 103
},
{
    "_id" : ObjectId("583f6e6d14c8042dd7c2132t6"),
    "transid" : 2,
    "acct" : "acct2",
    "transdate" : ISODate("2012-01-31T05:00:00.000Z"),
    "category" : "category2",
    "amount" : 103
},
{
    "_id" : ObjectId("583f6e6d14c8042dd7c2132t6"),
    "transid" : 3,
    "acct" : "acct2",
    "transdate" : ISODate("2016-07-31T05:00:00.000Z"),
    "category" : "category1",
    "amount" : 103
},
{
    "_id" : ObjectId("583f6e6d14c8042dd7c2132t6"),
    "transid" : 4,
    "acct" : "acct2",
    "transdate" : ISODate("2012-01-31T05:00:00.000Z"),
    "category" : "category2",
    "amount" : 103
},
{
    "_id" : ObjectId("583f6e6d14c8042dd7c2132t6"),
    "transid" : 5,
    "acct" : "acct2",
    "transdate" : ISODate("2012-01-31T05:00:00.000Z"),
    "category" : "category3",
    "amount" : 103
},
{
    "_id" : ObjectId("583f6e6d14c8042dd7c152g2"),
    "transid" : 6,
    "acct" : "acct3",
    "transdate" : ISODate("2016-10-31T05:00:00.000Z"),
    "category" : "category3",
    "amount" : 103
}]

混合要素の別の配列に基づいて、上記のオブジェクトの配列をフィルタリングしています。要素は次の検索フィールドを表します。

  • "searchstring"：データ配列のすべてのフィールドで一致するテキストシーケンスを検索します

  • アカウントタイプを表すキー値と、フィルターに使用する必要があるかどうかを示す値のtrueまたはfalseを持つオブジェクト

  • transdateをフィルターするstartdate

  • 変換日をフィルタリングする終了日

  • カテゴリーをフィルターするカテゴリー名

検索条件を持つ配列は次のようになります（ただし、一部のフィールドが不要な場合は、未定義または空の文字列または配列に設定されます）。

var filtercondition = {
    "p",
    {acct1:true,acct2:false,acct3:true...}
    "2016-06-01",
    "2016-11-30",
    "category3"
}

これを達成するための最良の方法は何ですか？私が考案したのは、フィルター配列の各要素を個別に検索することですが、これは最適ではなく、非常に面倒です。私は私のセットアップの再設計を受け入れる...

javascriptfiltering
6
mo_maat
// You wrote that it's an array, so changed the braces 
var filtercondition = ["p",
{acct1:true,acct2:false,acct3:true...}
"2016-06-01",
"2016-11-30",
"category3"
];

var filtered = data.filter(o => {
    if(filtercondition[0] && !o.category.includes(filtercondition[o])) { // checking just the category, but you can check if any of more fields contains the conditions 
        return false;
    }
    if(filtercondition[1]) {
        for(var key in filtercondition[1]) {
        if(filtercondition[1][key] === true && o.acct != key) {
            return false;
        }
        }
    }
    if(filtercondition[2] && o.transdate < filtercondition[2]) {
        return false;
    }
    if(filtercondition[3] && o.transdate > filtercondition[3]) {
        return false;
    }
    if(filtercondition[4] && o.category !== filtercondition[4]) {
        return false;
    }

    return true;
});

2つの注意：-filterconditionの括弧を配列に変更しましたが、代わりにオブジェクトを使用することをお勧めします。 -この{acct1:true,acct2:false,acct3:true...}サンプルは、acctフィールドをacct1とacct3に同時にする必要があることを示唆しているため、私には意味がありません。

5
alek kowalczyk

最初に、中括弧ではなく、ブラケットを配列に使用します。

var filtercondition = [
    "p",
    {acct1:true,acct2:false,acct3:true...},
    "2016-06-01",
    "2016-11-30",
    "category3"
];

繰り返しになりますが、配列がそのための最良のデータ型であるとは思いません。次のようなオブジェクトを試してください：

var filtercondition = {
    query: "p",
    accounts: {acct1:true,acct2:false,acct3:true...},
    date1: "2016-06-01",
    date2: "2016-11-30",
    category: "category3"
};

次に、Array.prototype.filterを使用してみます。

var filtered = data.filter(function(obj) {
    for (var key in filtercondition) {
        // if condition not met return false
    }
    return true;
});
3
Web_Designer

関数の配列を作成します。各関数は条件を表します。

これは、アプローチを示すサンプルコードです...

 var conditions = [];

 // Dynamically build the list of conditions
 if(startDateFilter) {
    conditions.Push(function(item) { 
       return item.transdate >= startDateFilter.startDate;
    });
 };

 if(categoryFilter) {
     conditions.Push(function(item) {
         return item.cateogry === categoryFilter.category;
     });
 };
 // etc etc

条件の配列を取得したら、 Array.prototype.every を使用して、アイテムの各条件を実行できます。

 var itemsMatchingCondition = data.filter(function(d) {
     return conditions.every(function(c) {
         return c(d);
     });
 });
1
Andrew Shepherd

私はたくさんの小さなきめ細かな関数を使い、それらを作成します。

//only some utilities, from the top of my mind
var identity = v => v;

//string-related
var string = v => v == null? "": String(v);
var startsWith = needle => haystack => string(haystack).startsWith(needle);
var endsWith = needle => haystack => string(haystack).endsWith(needle);
var contains = needle => haystack => string(haystack).contains(needle);

//do sth with an object
var prop = key => obj => obj != null && prop in obj? obj[prop]: undefined;
var someProp = fn => obj => obj != null && Object.keys(obj).some(k => fn(k) );
var someValue = fn => obj => obj != null && Object.keys(obj).some(k => fn(obj[k]) );

//logic
var eq = b => a => a === b;
var not = fn => function(){ return !fn.apply(this, arguments) };
var and = (...funcs) => funcs.reduce((a, b) => function(){
        return a.apply(this, arguments) && b.apply(this, arguments);
    });

var or = (...funcs) => funcs.reduce((a, b) => function(){
        return a.apply(this, arguments) || b.apply(this, arguments);
    });

//composition
var compose = (...funcs) => funcs.reduce((a, b) => v => return a(b(v)));
var chain = (...funcs) => funcs.reduceRight((a, b) => v => return a(b(v)));

//and whatever else you want/need
//but stay granular, don't put too much logic into a single function

そして構成例：

var filterFn = and(
    //some value contains "p"
    someValue(contains("p")),

    //and
    chain(
        //property "foo"
        prop("foo"), 
        or(
            //either contains "asdf"
            contains("asdf"),

            //or startsWith "123"
            startsWith("123")
        )
    ),
)

フィルター条件の作成方法がわからないので、それらをこのような構成に解析する方法を正確に伝えることはできませんが、次のように構成できます。

//start with something basic, so we don't ever have to check wether filterFn is null
var filterFn = identity;

//and extend/compose it depending on some conditions
if(/*hasQuery*/){
    filterFn = and(
        // previous filterFn(obj) && some value on obj contains `query`
        filterFn,
        someValue(contains(query)))
    )
}

if(/*condition*/){
    //extend filterFn
    filterFn = or(
        // (obj.foo === null) || previous filterFn(obj)
        chain(prop("foo"), eq(null)),
        filterFn
    );
}

等々

1
Thomas

まず、いくつかのポイント：

  • dataオブジェクトは、ブラウザーで使用する場合は無効です。おそらく、データはMongoDBからのものでしょう。バックエンド（データソース）には、それを適切にエンコードし、ObjectIDおよびISODate参照を削除するメソッドが必要です。

  • filterconditionは有効なJavaScriptオブジェクト/ JSONではありません。私の例を確認してください。

したがって、 Array＃filter メソッドを使用してデータ配列をフィルタリングできます。

そんな感じ：

let data = [{
    "_id" : "583f6e6d14c8042dd7c979e6",
    "transid" : 1,
    "acct" : "acct1",
    "transdate" : "2012-01-31T05:00:00.000Z",
    "category" : "category1",
    "amount" : 103
},
{
    "_id" : "583f6e6d14c8042dd7c2132t6",
    "transid" : 2,
    "acct" : "acct2",
    "transdate" : "2012-01-31T05:00:00.000Z",
    "category" : "category2",
    "amount" : 103
},
{
    "_id" : "583f6e6d14c8042dd7c2132t6",
    "transid" : 5,
    "acct" : "acct2",
    "transdate" : "2012-01-31T05:00:00.000Z",
    "category" : "category3",
    "amount" : 103
}];


let filterToApply = {
    acct: {
        acct1: true,
        acct2: false,
        acct3: true
    },
    initialDate: "2016-06-01",
    finalDate: "2016-11-30",
    category: "category3"
}


let filterData = (array, filter) => {

    return array.filter( (item) => {

        /* here, you iterate each item and compare with your filter,
           if the item pass, you must return true. Otherwise, false */


        /* e.g.: category check (if present only) */
        if (filter.category && filter.category !== item.category) 
            return false;
        }

        /* add other criterias check... */ 

        return true;
});

}

let dataFiltered = filterData(data, filterToApply);
console.log(dataFiltered);
1
mrlew