examples - Javascript: ¿Cómo filtrar la matriz de objetos en función de los atributos?

jquery selector

Question

Tengo la siguiente matriz de JavaScript de los objetos de casa de bienes raíces:

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;

Lo que me gustaría hacer es poder realizar un filtro en el objeto para devolver un subconjunto de objetos "domésticos".

Por ejemplo, quiero poder filtrar en función de: price , sqft , num_of_beds y num_of_baths .

Pregunta: ¿Cómo puedo realizar algo en JavaScript como el pseudo-código a continuación:

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

Tenga en cuenta que la sintaxis no tiene que ser exactamente igual a la anterior. Esto es solo un ejemplo.

Answer 1

Aquí está el violín de trabajo que funciona bien en IE8 usando la función MAP de jquery

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

Answer 2

Debería revisar OGX.List que ha incorporado métodos de filtrado y extiende la matriz de javascript estándar (y también la agrupación, clasificación y búsqueda). Aquí hay una lista de operadores que soporta para los filtros:

''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

Puedes usarlo de esta manera

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

Y puede agregar tantos filtros como desee (solo uno por propiedad)

Answer 3

O simplemente puede usar $.each (que también funciona para objetos, no solo matrices) y construir una nueva matriz como esta:

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

Answer 4

Prefiero el marco de subrayado. Sugiere muchas operaciones útiles con objetos. Tu tarea:

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

se puede sobrescribir como

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

Espero que te sea de utilidad!

Answer 5

Puede implementar un método de filtro usted mismo que satisfaga sus necesidades; a continuación le indicamos cómo:

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

¡Espero eso ayude!

Answer 6

Puedes hacer esto con bastante facilidad: probablemente hay muchas implementaciones entre las que puedes elegir, pero esta es mi idea básica (y probablemente haya algún formato en el que puedas iterar sobre un objeto con jQuery, simplemente no puedo pensar en eso ahora):

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

Y entonces podrías invocar esta función así:

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

De esta manera, puede invocar el filtro según el predicado que defina, o incluso filtrar varias veces utilizando filtros más pequeños.

Answer 7

Puedes intentar usar framework como jLinq - a continuación se muestra un ejemplo de código de usar jLinq

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

Para obtener más información, puede seguir el enlace http://www.hugoware.net/projects/jlinq

Answer 8

Puedes usar el método 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;
});

Ejemplo vivo:

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

Este método es parte del nuevo estándar ECMAScript 5th Edition y se puede encontrar en casi todos los navegadores modernos.

Para IE, puede incluir el siguiente método de compatibilidad:

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

Answer 9

Puedes usar jQuery.grep () desde 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
});

Answer 10

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

Puede utilizar esta función lambda. Puede encontrar más detalles aquí, ya que estamos filtrando los datos según su condición que devuelva verdadero o falso y recopilará los datos en una matriz diferente para que su matriz real no se modifique.

@JGreig Por favor, mira en ello.