วิธีการกรองอาเรย์วัตถุตามคุณสมบัติ?

ฉันมีอาร์เรย์ 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;

สิ่งที่ฉันต้องการจะทำคือสามารถทำการกรองบนวัตถุเพื่อส่งคืนชุดย่อยของวัตถุ "บ้าน"

ตัวอย่างเช่นผมต้องการที่จะสามารถที่จะกรองขึ้นอยู่กับ: price, sqft, และnum_of_bedsnum_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 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;
  };
}

คุณสามารถลองใช้เฟรมเวิร์กเช่น jLinq - ต่อไปนี้เป็นตัวอย่างโค้ดของการใช้ jLinq

var results = jLinq.from(data.users)
.startsWith("first", "a")
.orEndsWith("y")
.orderBy("admin", "age")
.select();

สำหรับข้อมูลเพิ่มเติมคุณสามารถไปที่ลิงค์http://www.hugoware.net/projects/jlinq

ฉันชอบกรอบขีดล่าง มันแสดงให้เห็นการดำเนินงานที่มีประโยชน์มากมายกับวัตถุ งานของคุณ:

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

หวังว่ามันจะมีประโยชน์สำหรับคุณ!

ฉันประหลาดใจที่ไม่มีใครโพสต์คำตอบเดียว:

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

นี่คือซอที่ใช้งานได้ซึ่งทำงานได้ดีใน IE8 โดยใช้ฟังก์ชั่น jquery MAP

http://jsfiddle.net/533135/Cj4j7/

json.HOMES = $.map(json.HOMES, function(val, key) {
    if (Number(val.price) <= 1000
            && Number(val.sqft) >= 500
            && Number(val.num_of_beds) >=2
            && Number(val.num_of_baths ) >= 2.5)
        return val;
});

คุณสามารถใช้ jQuery.grep () ตั้งแต่ jQuery 1.0:

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

คุณสามารถทำสิ่งนี้ได้อย่างง่ายดาย - อาจมีการใช้งานหลายอย่างที่คุณสามารถเลือกได้ แต่นี่เป็นแนวคิดพื้นฐานของฉัน (และอาจมีรูปแบบบางอย่างที่คุณสามารถวนซ้ำวัตถุที่มี 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;
});

ด้วยวิธีนี้คุณสามารถเรียกใช้ตัวกรองตามสิ่งที่คุณกำหนดหรือแม้แต่กรองหลาย ๆ ครั้งโดยใช้ตัวกรองขนาดเล็ก

คุณสามารถใช้วิธีการกรองด้วยตนเองที่ตรงกับความต้องการของคุณนี่คือวิธี:

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

หวังว่าจะช่วย!

คุณควรตรวจสอบ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}});

หรือคุณสามารถใช้$.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);
    }
});

ฉันใช้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"}
];

และคุณต้องการค้นหานักแสดงทุกคนที่ได้รับการจัดอันดับให้เป็นดาว Holywood สัญชาติของพวกเขาไม่ควรเป็นหนึ่งใน 'อังกฤษ', 'อิตาลี', 'สเปน', 'สเปน', 'กรีก' รวมทั้งชื่อของพวกเขาจะไม่เป็นหนึ่งใน 'แมรี่' 'โจ' ตัวอย่างของ Bizzar ฉันรู้! อย่างไรก็ตามด้วยชุดของเงื่อนไขที่คุณจะสร้างวัตถุต่อไปนี้:

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

ตกลงตอนนี้ถ้าruleOut(actors, unwantedFieldsFilter)คุณจะได้รับเท่านั้น

[{ชื่อผู้ใช้: "บิล", งาน: "ดาว", ภาษา: "ตุรกี"}]

และบิลก็เป็นคนของคุณเนื่องจากชื่อของเขาไม่ใช่หนึ่งใน 'แมรี่', 'โจ', สัญชาติของเขาไม่รวมอยู่ใน ['อังกฤษ', 'อิตาลี', 'สเปน', 'สเปน', 'กรีก'] รวมทั้งเขาเป็นดาว!

มีวิธีหนึ่งในวิธีของฉันคือapplyAllFiltersและเป็นจริงโดยค่าเริ่มต้น หากคุณพยายามที่จะปกครองออกด้วยชุดพารามิเตอร์นี้เป็นเท็จนั่นจะทำงานเป็นตัวกรอง 'หรือ' แทน 'และ' ตัวอย่าง: ruleOut(actors, {job:["actor"], language:["Italian"]}, false)จะให้ทุกคนที่ไม่ใช่นักแสดงหรืออิตาเลี่ยน:

[{ชื่อผู้ใช้: "Mary", งาน: "star", ภาษา: "Turkish"},
{ชื่อผู้ใช้: "Takis", งาน: "star", ภาษา: "Greek"},
{ชื่อผู้ใช้: "Joe", งาน: "star", ภาษา: "Turkish"},
{ชื่อผู้ใช้: "Bill", งาน: "star", ภาษา: "Turkish"}]

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

คุณสามารถใช้ฟังก์ชั่นแลมบ์ดานี้ได้ รายละเอียดเพิ่มเติมสามารถดูได้ที่นี่เนื่องจากเรากรองข้อมูลตามที่คุณมีเงื่อนไขว่าส่งคืนจริงหรือเท็จและจะรวบรวมข้อมูลในอาร์เรย์ที่แตกต่างกันดังนั้นอาร์เรย์ที่แท้จริงของคุณจะไม่ถูกแก้ไข

@JGreig โปรดดูมัน

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

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

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