1. ホーム
  2. javascript

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

2022-03-16 12:35:45

質問

私は、不動産住宅オブジェクトの次の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;

私がやりたいことは、オブジェクトにフィルタをかけて、"home" オブジェクトのサブセットを返すことです。

例えば、以下のような条件でフィルタリングできるようにしたい。 price , sqft , num_of_beds および num_of_baths .

以下の擬似コードのように、JavaScriptで何かを実行するにはどうしたらよいでしょうか。

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

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

解決方法は?

を使用することができます。 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;
});

ライブの例です。

var obj = {
    '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) ...     
    ]
};
// (Note that because `price` and such are given as strings in your object,
// the below relies on the fact that <= and >= with a string and number
// will coerce the string to a number before comparing.)
var newArray = obj.homes.filter(function (el) {
  return el.price <= 1000 &&
         el.sqft >= 500 &&
         el.num_of_beds >= 2 &&
         el.num_of_baths >= 1.5; // Changed this so a home would match
});
console.log(newArray);

このメソッドは、新しい ECMAScript第5版 規格に準拠し、ほぼすべてのモダンブラウザで利用可能です。

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;
  };
}