gradient

En esta entrada aprenderemos cómo filtrar objetos en un arreglo con el método .filter() de Javascript. De mucha utilidad cuando tratamos de obtener datos un poco más específicos o cuando se requiere dar la posibilidad al usuario de filtrar los resultados en una búsqueda. Veamos los ejemplos:

Supongamos que desde el backend nos envían el siguiente arreglo de personajes de rol

let characters = [
    { age: 30, sex: "Man", class: "Spartan", weapon: "Spear", race: "Orc" },
    { age: 40, sex: "Man", class: "Priest", weapon: "Staff", race: "Faun" },
    { age: 25, sex: "Woman", class: "Ninja", weapon: "Kusarigama", race: "Human" },
    { age: 45, sex: "Man", class: "Samurai", weapon: "Katana", race: "Human" },
    { age: 34, sex: "Woman", class: "Paladin", weapon: "Claymore", race: "Elf" },
    { age: 19, sex: "Woman", class: "Rogue", weapon: "Daggers", race: "Elf" }
]

Ahora, si queremos obtener solo a los personajes de raza «Human», utilizamos la función .filter(). Básicamente pasamos un parámetro en singular a la función (character), y llamamos a los atributos por medio de este parámetro (character.race, character.age, character.sex, etc). Ojo con las diferencias de sintaxis entre ES5 y ES6.

//ECMAScript5
var onlyHumansES5 = characters.filter(function(character){
    return character.race == "Human";
})
console.log(onlyHumansES5);
/*resultado: [
  {age: 25, sex: 'Woman', class: 'Ninja', weapon: 'Kusarigama', race: 'Human'},
  {age: 45, sex: 'Man', class: 'Samurai', weapon: 'Katana', race: 'Human'}
]*/
//ECMAScript6
let onlyHumansES6 = characters.filter(character => character.race == "Human");
console.log(onlyHumansES6);
/*resultado: [
  {age: 25, sex: 'Woman', class: 'Ninja', weapon: 'Kusarigama', race: 'Human'},
  {age: 45, sex: 'Man', class: 'Samurai', weapon: 'Katana', race: 'Human'}
]*/

Si quisiéramos agregar más de una restricción al filtro lo haríamos de esta forma:

let onlyHumans = characters.filter(character => character.race == "Human" && character.sex == "Woman");
console.log(onlyHumans);
/*resultado: [
  {age: 25, sex: 'Woman', class: 'Ninja', weapon: 'Kusarigama', race: 'Human'}
]*/

También podemos usar otro tipo de condicionales, por ejemplo; filtremos a los personajes mayores de 30:

let filterAge = characters.filter(character => character.age > 30);
console.log(filterAge);
/*resultado: [
  {age: 40, sex: 'Man', class: 'Priest', weapon: 'Staff', race: 'Faun'},
  {age: 45, sex: 'Man', class: 'Samurai', weapon: 'Katana', race: 'Human'},
  {age: 34, sex: 'Woman', class: 'Paladin', weapon: 'Claymore', race: 'Elf'}
]*/

Espero que esta entrada sobre «Cómo filtrar objetos en un arreglo con JavaScript» haya sido de tu utilidad. Si sabés de alguien que necesite esta información no dudes en compartírsela. Puedes encontrar mas entradas como esta en:

Si deseas profundizar más en este tema te dejo un enlace a documentación:

Angel Mavare

Apasionado por la tecnología y los medios digitales, Ingeniero de software, programador, aficionado a la ilustración y co-fundador de pixonauta.com.

Editado el: 28 junio, 2022
Suscribirse
Notificar a
guest

0 Comentarios
Inline Feedbacks
Ver todos los comentarios