Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Filter

8/27
Recursos

Aportes 25

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Resumen
.
filter() lo que hace es filtrar el array original en base a una condición, los que la cumplan estaran en el nuevo array creado.
.
Por lo tanto filter() es inmutable y el nuevo array creado solamente puede contener:

  • cero coincidencias
  • todas coincidencias
  • algunas coincidencias

Pero nunca más coincidencias que el tamaño del array original.

const words = ["spray", "limit", "elite", "exuberant"];

// con for
const newArray = [];
for (let index = 0; index < words.length; index++) {
  const element = words[index];
  if (element.length >= 6) {
    newArray.push(element);
  }
}

// VS

// con filter
const rta = words.filter((element) => element.length >= 6);

// en ambos casos, el resultado:
> [ 'exuberant' ]

.
offtopic: el método includes() determina si una matriz incluye un determinado elemento, devuelve true o false según corresponda.

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected truee

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected true

console.log(pets.includes('at'));
// expected false

Esta imagen ilustra muy bien los 3 métodos mas usados para la manipulación de arrays

es tremendamente necesario tomar este curso antes de los de los frameworks js

Qué tal un reto más 😎, si fuera un array de objetos con name, lastName y age ¿Cómo harías el método para que el buscador encuentre coincidencias con cualquiera de esos atributos? Dame tu la solución y dare feedback y la respuesta de una posible solución. 👇

Es importante remarcar que al igual que el metodo anterior, en este metodo cuando trabajamos con objetos, el nuevo array sera un array de referencias, por lo tanto al modificar el nuevo, tambien veremos modificado el orignal.

Dejo un codigo que hice antes de ver la explicacion del video, resultó un buscador más o menos reactivo y bastante útil =D Si encuentran forma de mejorarlo compartan sus versiones. Se que puede ser más legible, pero prioricé el tamaño

const buscador = document.querySelector("#buscador"); //Input type Text
const lista = document.querySelector("#lista"); //Div vacio
const nombres = ["Nicolas", "Nazareno", "Alvaro", "Cecilia", "Mariana", "Martin", "Jose", "Ariana", "Javier"];

const buscar = (input, array) => {
  console.log(input)
  

  const listaItems = array.filter(item => item.toLowerCase().includes(input.toLowerCase()));
  
  lista.innerText = listaItems;
}

buscador.addEventListener('input', () => buscar(buscador.value, nombres))

Mi buscador en React

va mi código

import { useState } from "react";
import "./App.css";

function App() {
  const [formState, setFormState] = useState({ query: null });

  const { query } = formState;

  const orders = [
    {
      customerName: "Nicolas",
      total: 60,
      delivered: true,
    },
    {
      customerName: "Zulema",
      total: 120,
      delivered: false,
    },
    {
      customerName: "Santiago",
      total: 180,
      delivered: true,
    },
    {
      customerName: "Valentina",
      total: 240,
      delivered: true,
    },
  ];

  const handleInputChange = ({ target }) => {
    setFormState({
      ...formState,
      [target.name]: target.value,
    });
  };

  const myFilter = (query, value) => {
    const newArray = value.filter((e) => query === e.customerName);
    return newArray.map((value) => (
      <li>
        <h4>{value.customerName}</h4>
        <p>{value.total}</p>
      </li>
    ));
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>buscador</h1>
        <input
          type="text"
          name="query"
          placeholder="¿Qué estás buscando?"
          autoComplete="off"
          value={query}
          onChange={handleInputChange}
        />
        <ul>{orders && myFilter(query, orders)}</ul>
      </header>
    </div>
  );
}

export default App;

Obvio que falta pulir con

validaciones pero salió rápido.

Filter: retorna un nuevo array cuyos elementos cumplan con una condicion.

  • No retorna mas de la cantidad original de elementos, puede regresar la misma cantidad, menos o nada

  • Filter es inmutable

LO IDEAL ES QUE LAS BÚSQUEDAS SE REALICEN DESDE LA BASE DE DATOS pero en el caso que necesitemos mostrar determinada info se puede perfectamente desde el front implementar un filter

Comparto apunte de esta clase y explico mi buscador en React

filter()
``` Puede es inmutable, retorna un nuevo array con una con los elementos que cumplan la condicion de evaluacion, osea que puede retornar un numero de elementos siempre igual a su dimensión original, menor o cero elementos en caso que ninguno cumpla el criterio de evaluación.

El método filter() nos permite filtrar los elementos de un array y devolver un nuevo array con sólo los elementos que queramos. Para ello, utilizaremos la función callback para establecer una condición que devuelve true sólo en los elementos que nos interesen:

const arr = ["Ana", "Pablo", "Pedro", "Pancracio", "Heriberto"];
const nuevoArr = arr.filter((e) => e[0] == "P");

nuevoArr; // Devuelve [‘Pablo’, ‘Pedro’, ‘Pancracio’]
En este ejemplo, filtramos sólo los elementos en los que su primera letra sea P. Por lo tanto, la variable nuevoArr será un array con sólo esos elementos.

Ten en cuenta que si ningún elemento cumple la condición, filter() devuelve un array vacío.

Filter: Es un método inmutable. Filtra los elementos de un array con base a un condicional, los cuales serán parte de un nuevo array.

const words = ['spray', 'limit', 'elite', 'exuberant']
const wordsFilter = words.filter(item => item.length >= 6);
console.log('Array with filter', wordsFilter );
const orders = [
    {client: "Marcos", product: "Pizza", total: 350, delivered: true},
    {client: "Juan", product: "Zapatos", total: 950, delivered: false},
    {client: "Martín", product: "Oso de Peluche", total: 150, delivered: true},
    {client: "Andrés", product: "Hamburguesa", total: 90, delivered: false},
    {client: "Pepe", product: "Carne", total: 350, delivered: false},
];
const search = (query) =>{
    query = query.toString();
    query = query.toLowerCase();
    return orders.filter(order => order.client.toLowerCase().includes(query) || order.total.toString().includes(query) || order.product.toLowerCase().includes(query))
}
console.log(search(35))

tan facil que explca el profe, me usta filter

Otra práctica de filter en react

va mi código

import "./App.css";

function App() {
  const orders = [
    {
      customerName: "Nicolas",
      total: 60,
      delivered: true,
    },
    {
      customerName: "Zulema",
      total: 120,
      delivered: false,
    },
    {
      customerName: "Santiago",
      total: 180,
      delivered: true,
    },
    {
      customerName: "Valentina",
      total: 240,
      delivered: true,
    },
  ];


  const myFilter = (value) => {
    const newArray = value.filter((e) => e.delivered![Captura de Pantalla 2022-05-06 a la(s) 09.55.21.png](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202022-05-06%20a%20la%28s%29%2009.55.21-870c80e0-6fd7-47c8-a656-32ff002ba196.jpg));
    return newArray.map((product) => (
      <li>
        <h4>{product.customerName}</h4>
        <p>{product.total}</p>
      </li>
    ));
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>hola</h1>
        <ul>{orders && myFilter(orders)}</ul>
      </header>
    </div>
  );
}

export default App;

y mi apunte

mi resolución básica con react

aunque ahora vi el reto plus que tiró el profe aca abajo y me cope como para seguir experimentando.


va mi codigo

import "./App.css";

function App() {
  const words = ["spray", "limit", "elite", "exuberant"];

  const myFilter = (value) => {
    const newArray = value.filter((e) => e.length >= 6);
    return newArray.map((product) => <li>{product}</li>);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>hola</h1>
        <ul>{myFilter(words)}</ul>
      </header>
    </div>
  );
}

export default App;


mi renderizado

.filter(): Crea un nuevo array con los elementos que cumplan la condicion implementada por la funcion dada.

Bueno. El método filter() en realidad si puede ser mutable, siempre en cuando hagas cosas demasiado raras, les dejo un ejemplo 😐 :

const words = ['spray','limit', 'elite', 'exuberant'];
const rta = words.filter((item) => {
    words[1]= 'setzooo!'
    return item.length >= 6;
});
console.log(words);
[ 'spray', 'setzooo!', 'elite', 'exuberant' ]
console.log(rta);
['setzooo!', 'exuberant']

Muy interesante el filter, ahorra espacio y tiempo.
Siempre trabajé con el for, creo que es saber de donde vienen las cosas y las nuevas funciones, cada vez todo es mas fácil y potente.

Para hacer un buscador sin importar que sea minúsculas o mayúsculas

const data = [
    { name: "Nathalie", single: "false" },
    { name: "Yulianny", single: "false" },
    { name: "Gio", single: "false" },
    { name: "Maryu", single: "false" }
  ];
  
  const searchName = (query) => {
    return data.filter(item => {
      return item.name.toString()
            .toLowerCase()
            .includes(query.toLowerCase())
    })
  }
  console.log(searchName('mar'));

Hice el archivo HTML combinándolo con Map()

Código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>filter</title>
  <style>
    body{
      width: 100%;
      background-color: blanchedalmond;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <div id="app2"></div>

  <script>
    const app = document.getElementById('app');
    const app2 = document.getElementById('app2');
    const orders = [
      {
        customerName: "Nicolas",
        total: 60,
        delivered: true,
      },
      {
        customerName: "Zulema",
        total: 120,
        delivered: false,
      },
      {
        customerName: "Santiago",
        total: 180,
        delivered: true,
      },
      {
        customerName: "Valentina",
        total: 240,
        delivered: true,
      },
    ];

    console.log(orders)

    const search = (query) => {
      return orders.filter(item => {
      return item.customerName.includes(query)
    })
  }
  const mostrar = search('a');
  app.innerHTML = mostrar.map( item => {
    return  `
    <h1>
      ${item.customerName} -
      ${item.total} -
      ${item.delivered}
    </h1>
  `
  })

  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="buscador" id="buscador" />
    <div id="lista"></div>
    <p><strong>personas del buscador </strong></p>
    <div id="labels"></div>

    <script>
      //const buscador = document.querySelector("#buscador"); //Input type Text
      const labels = document.getElementById("labels");
      const buscador = document.getElementById("buscador");
      const lista = document.querySelector("#lista"); //Div vacio
      const nombres = [
        "Nicolas",
        "Nazareno",
        "Alvaro",
        "Cecilia",
        "Mariana",
        "Martin",
        "Jose",
        "Ariana",
        "Javier",
      ];
      nombres.forEach((item) => {
        labels.innerHTML += `
                <li> 
                    <label for='${item}' >${item} </label>   
                </li>`;
      });
      const buscar = (input, array) => {
        console.log(input);

        const listaItems = array.filter((item) =>
          item.toLowerCase().includes(input.toLowerCase())
        );

        lista.innerText = listaItems;
      };

      buscador.addEventListener("input", () => buscar(buscador.value, nombres));
    </script>
  </body>
</html>

para sacar solo los delevery en false

const orders = [
    {
        customerName: "Nicolas",
        total: 60,
        delivered: true,
    },
    {
        customerName: "Zulema",
        total: 120,
        delivered: false,
    },
    {
        customerName: "Santiago",
        total: 180,
        delivered: true,
    },
    {
        customerName: "Valentina",
        total: 240,
        delivered: true,
    },
];

const ordersDelivery = orders.filter(({delivered}) => !delivered); 
console.log('orderDelivery',ordersDelivery);

El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.

const users = [
    { uid: 1, name: "John", age: 34 },
    { uid: 2, name: "Amy", age: 20 },
    { uid: 3, name: "camperCat", age: 10 },
];

const mayor = users.filter((user) => user.age > 30);
console.log(mayor);