属性に基づいてオブジェクト配列をフィルタリングする方法は?


473

以下の不動産ホームオブジェクトのJavaScript配列があります。

var json = {
    'homes': [{
            "home_id": "1",
            "price": "925",
            "sqft": "1100",
            "num_of_beds": "2",
            "num_of_baths": "2.0",
        }, {
            "home_id": "2",
            "price": "1425",
            "sqft": "1900",
            "num_of_beds": "4",
            "num_of_baths": "2.5",
        },
        // ... (more homes) ...     
    ]
}

var xmlhttp = eval('(' + json + ')');
homes = xmlhttp.homes;

私がやりたいのは、オブジェクトに対してフィルターを実行して、「ホーム」オブジェクトのサブセットを返すことです。

たとえば、私はに基づいて、フィルタにできるようにしたい:pricesqftnum_of_beds、とnum_of_baths

以下の疑似コードのようなものをJavaScriptで実行するにはどうすればよいですか。

var newArray = homes.filter(
    price <= 1000 & 
    sqft >= 500 & 
    num_of_beds >=2 & 
    num_of_baths >= 2.5 );

構文は上記とまったく同じである必要はありません。これは単なる例です。



3
var json = { ... }JSONは、データ交換のためのテキスト表記です。(詳細はこちら。) JavaScriptソースコードを処理していて、文字列を処理していない場合、JSONを処理していません。
TJクラウダー2017年

1
evalを使用しないでください。これは一般に悪い習慣であり、パフォーマンスの問題を引き起こす可能性があります。プロセッサがロックアップしていたので、プロジェクトでそれらの多くを取り除く必要がありました。
SDH

回答:


718

次のArray.prototype.filter方法を使用できます。

var newArray = homes.filter(function (el) {
  return el.price <= 1000 &&
         el.sqft >= 500 &&
         el.num_of_beds >=2 &&
         el.num_of_baths >= 2.5;
});

実例:

このメソッドは新しいECMAScript 5th Edition標準の一部であり、ほとんどすべての最新のブラウザーで使用できます。

IEの場合、互換性のために次のメソッドを含めることができます。

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun /*, thisp*/) {
    var len = this.length >>> 0;
    if (typeof fun != "function")
      throw new TypeError();

    var res = [];
    var thisp = arguments[1];
    for (var i = 0; i < len; i++) {
      if (i in this) {
        var val = this[i];
        if (fun.call(thisp, val, i, this))
          res.push(val);
      }
    }
    return res;
  };
}

8
/ *、thisp * /とは何ですか?
JGreig 2010

2
@JGreig:オプションの引数を渡すことができることを示すコメントにすぎません。ECMA標準では、このメソッドは1つの引数のみを期待する必要があると正確に規定されているため、引数は直接指定されません(Array.prototype.filter.length == 1;)。2番目の引数を使用すると、それはthisコールバック関数内の値として使用されます。
CMS

1
@CMS、このコードは機能しますか?これは、価格を実際に高く設定し、sqft / beds / bathsを実際に低く設定した場合でも、空の配列を返します。このコードは動作しますか?
JGreig 2010

2
@JGreig:はい、機能します。基準を確認する必要があります。おそらく、JSONのより完全な例をpastie.orgまたはjsbin.comに投稿し、フィルターに使用する基準を投稿することができます。
CMS

2
@CMS回答に、新しい配列が返され、元の配列は変更されないという事実が含まれているとよいでしょう。これは提供されたリンクで述べられていますが、これなしの答えは不完全または不正確です
GWorking


26

私はアンダースコアフレームワークを好みます。オブジェクトを使用した多くの便利な操作が提案されています。あなたのタスク:

var newArray = homes.filter(
    price <= 1000 & 
    sqft >= 500 &
    num_of_beds >=2 & 
    num_of_baths >= 2.5);

次のように上書きできます:

var newArray = _.filter (homes, function(home) {
    return home.price<=1000 && sqft>=500 && num_of_beds>=2 && num_of_baths>=2.5;
});

お役に立てれば幸いです。


この下線はどのように機能し、正確にはどういう意味ですか?
John Demetriou

4
ちょうど発見されましたunderscore-querygithub.com/davidgtonge/underscore-query)。MongoDBのような構文を使用してJavaScript配列をクエリします。したがって、ここで使用します_.query(homes, {price: {$lt:1000}, sqft: {$gte: 500}, num_of_beds: {$gte:2}, num_of_baths: {$gte: 2.5}}
プロトタイプ

12

誰も1行の応答を投稿していないことに驚いています。

const filteredHomes = json.homes.filter(x => x.price <= 1000 && x.sqft >= 500 && x.num_of_beds >=2 && x.num_of_baths >= 2.5);

...そしてそれを簡単に読むことができるように:

const filteredHomes = json.homes.filter( x => 
  x.price <= 1000 && 
  x.sqft >= 500 && 
  x.num_of_beds >=2 && 
  x.num_of_baths >= 2.5
);

2
おそらくそれは矢印機能だけでCMSの答えと同じであるため
Erich


7

jQuery 1.0以降、jQuery.grep()を使用できます。

$.grep(homes, function (h) {
  return h.price <= 1000
    && h.sqft >= 500
    && h.num_of_beds >= 2
    && h.num_of_baths >= 2.5
});

7

あなたはこれをかなり簡単に行うことができます-おそらくあなたが選択できる多くの実装がありますが、これは私の基本的な考えです(そして、jQueryでオブジェクトを反復できるいくつかのフォーマットがあるでしょう、私は今それを考えることができません):

function filter(collection, predicate)
{
    var result = new Array();
    var length = collection.length;

    for(var j = 0; j < length; j++)
    {
        if(predicate(collection[j]) == true)
        {
             result.push(collection[j]);
        }
    }

    return result;
}

そして、あなたはこのようにこの関数を呼び出すことができます:

filter(json, function(element)
{
    if(element.price <= 1000 && element.sqft >= 500 && element.num_of_beds > 2 && element.num_of_baths > 2.5)
        return true;

    return false;
});

このようにして、定義した述語に基づいてフィルターを呼び出したり、小さいフィルターを使用して複数回フィルターをかけたりすることができます。


最初のスニペットで「int length」を「var length」に変更してください
Malay Desai

4

自分のニーズを満たすフィルターメソッドを自分で実装できます。以下がその方法です。

function myfilter(array, test){
    var passedTest =[];
    for (var i = 0; i < array.length; i++) {
       if(test( array[i]))
          passedTest.push(array[i]);
    }

    return passedTest;
}

var passedHomes = myfilter(homes,function(currentHome){
     return ((currentHome.price <= 1000 )&& (currentHome.sqft >= 500 )&&(currentHome.num_of_beds >=2 )&&(currentHome.num_of_baths >= 2.5));
});

それが役に立てば幸い!


私の述語条件は、さまざまなオンクリックから変化します。現在の述語値を保存し、いつでもmyfilter関数に適用するにはどうすればよいですか?
マレーデサイ

3

フィルタリングメソッドが組み込まれ、標準のJavaScript配列(およびグループ化、並べ替え、検索)を拡張するOGX.Listを確認してください。フィルタでサポートされている演算子のリストを次に示します。

'eq' //Equal to
'eqjson' //For deep objects, JSON comparison, equal to
'neq' //Not equal to
'in' //Contains
'nin' //Doesn't contain
'lt' //Lesser than
'lte' //Lesser or equal to
'gt' //Greater than
'gte' //Greater or equal to
'btw' //Between, expects value to be array [_from_, _to_]
'substr' //Substring mode, equal to, expects value to be array [_from_, _to_, _niddle_]
'regex' //Regex match

このように使えます

  let list = new OGX.List(your_array);
  list.addFilter('price', 'btw', 100, 500);
  list.addFilter('sqft', 'gte', 500);
  let filtered_list = list.filter();

またはこのように

  let list = new OGX.List(your_array);
  let filtered_list = list.get({price:{btw:[100,500]}, sqft:{gte:500}});

またはワンライナーとして

   let filtered_list = new OGX.List(your_array).get({price:{btw:[100,500]}, sqft:{gte:500}});

2

または、単純に$.each(配列だけでなくオブジェクトでも機能します)を使用して、次のように新しい配列を作成することもできます。

var json = {
    'homes': [{
            "home_id": "1",
            "price": "925",
            "sqft": "1100",
            "num_of_beds": "2",
            "num_of_baths": "2.0",
        }, {
            "home_id": "2",
            "price": "1425",
            "sqft": "1900",
            "num_of_beds": "4",
            "num_of_baths": "2.5",
        },
        // ... (more homes) ...     
        {
            "home_id": "3-will-be-matched",
            "price": "925",
            "sqft": "1000",
            "num_of_beds": "2",
            "num_of_baths": "2.5",
        },
    ]
}

var homes = [];
$.each(json.homes, function(){
    if (this.price <= 1000
        && this.sqft >= 500
        && this.num_of_beds >= 2
        && this.num_of_baths >= 2.5
    ) {
        homes.push(this);
    }
});

2

特定の不要なプロパティ値にruleOut基づいてオブジェクトをフィルタリングするために関数を使用します。あなたの例では値の代わりに条件を使用することを理解していますが、私の回答は質問のタイトルに対して有効であるため、ここではメソッドを残します。

function ruleOut(arr, filterObj, applyAllFilters=true) {    
    return arr.filter( row => {            
        for (var field in filterObj) {
            var val = row[field];
            if (val) {                    
                if (applyAllFilters && filterObj[field].indexOf(val) > -1) return false;                
                else if (!applyAllFilters) {                        
                    return filterObj[field].filter(function(filterValue){ 
                        return (val.indexOf(filterValue)>-1);
                    }).length == 0;                 
                }
            }
        }
        return true;
    });
}

次のような俳優のリストがあるとします。

let actors = [
  {userName:"Mary", job:"star", language:"Turkish"},
  {userName:"John", job:"actor", language:"Turkish"},
  {userName:"Takis", job:"star", language:"Greek"},
  {userName:"Joe", job:"star", language:"Turkish"},
  {userName:"Bill", job:"star", language:"Turkish"}
];

そして、ハリウッドのスターと評価されているすべての俳優を見つけたい場合、その国籍は「英語」、「イタリア語」、「スペイン語」、「ギリシャ語」のいずれかである必要はありません。さらに、彼らの名前は「メアリー」ではありません。 「ジョー」。Bizzarの例です。とにかく、その一連の条件を使用して、次のオブジェクトを作成します。

let unwantedFieldsFilter= { 
  userName: ['Mary', 'Joe'],    
  job: ['actor'],   
  language: ['English', 'Italian', 'Spanish', 'Greek']  
};

さて、あなたがruleOut(actors, unwantedFieldsFilter)あなただけを得るなら今

[{userName: "Bill"、job: "star"、language: "Turkish"}]

そしてビルはあなたの男です、彼の名前は「メアリー」、「ジョー」のいずれでもないので、彼の国籍は[「英語」、「イタリア語」、「スペイン語」、「ギリシャ語」に含まれていません。

私の方法には1つのオプションがありapplyAllFiltersます。つまり、デフォルトでtrueです。このパラメータをfalseに設定してruleOutを実行しようとすると、「AND」ではなく「OR」フィルタリングとして機能します。例:ruleOut(actors, {job:["actor"], language:["Italian"]}, false)俳優でもイタリア人でもないすべての人を取得します。

[{userName: "Mary"、job: "star"、language: "Turkish"}、
{userName: "Takis"、job: "star"、language: "Greek"}、
{userName: "Joe"、job: 「スター」、言語:「トルコ語」}、
{ユーザー名:「ビル」、ジョブ:「スター」、言語:「トルコ語」}]


1
var filterHome = homes.filter(home =>
  return (home.price <= 999 &&
         home.num_of_baths >= 2.5 &&
         home.num_of_beds >=2 &&
         home.sqft >= 998));
console.log(filterHome);

このラムダ関数を使用できます。trueまたはfalseを返す条件に基づいてデータをフィルタリングしており、実際の配列が変更されないように別の配列でデータを収集するため、詳細はここにあります。

@JGreig調べてください。


1
const x = JSON.stringify(data);
const y = 'search text';

const data = x.filter(res => {
        return(JSON.stringify(res).toLocaleLowerCase()).match(x.toLocaleLowerCase());
      });

0
const state.contactList = [{
    name: 'jane',
    email: 'jane@gmail.com'
  },{},{},...]

const fileredArray = state.contactsList.filter((contactItem) => {
  const regex = new RegExp(`${action.payload}`, 'gi');
  return contactItem.nameProperty.match(regex) || 
    contactItem.emailProperty.match(regex);
});


// contactList: all the contacts stored in state
// action.payload: whatever typed in search field
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.