[javascript] 속성을 기반으로 객체 배열을 필터링하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

부동산 홈 객체의 다음 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_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;
});

라이브 예 :

코드 스 니펫 표시

이 방법은 새로운 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 링크를 참조하십시오.

답변

Underscore 프레임 워크를 선호합니다. 객체에 대한 많은 유용한 작업을 제안합니다. 당신의 작업 :

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

답변

다음은 jquery MAP 함수를 사용하여 IE8에서 올바르게 작동하는 작업 바이올린입니다.

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

답변

당신은 이것을 아주 쉽게 할 수 있습니다-아마도 당신이 선택할 수있는 많은 구현이있을 것입니다, 그러나 이것은 나의 기본 아이디어입니다 (그리고 아마도 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;
});

이 방법으로 정의한 술어에 따라 필터를 호출하거나 더 작은 필터를 사용하여 여러 번 필터링 할 수 있습니다.