Tengo una página esbelta para mostrar una lista de publicaciones, necesito darle al usuario la capacidad de filtrar esa lista por varias condiciones, por ejemplo: año, etiquetas, categoría, etc. Todas esas condiciones deben ser concurrentes, al igual que el sitio web de Amazon. barra lateral
Usando una tienda derivada, obtuve un filtro que funciona bien, pero aún así no puedo lograr que se apliquen 2 o 3 filtros al mismo tiempo.
Para el filtro "año" tengo el siguiente código:
import { readable, writable, derived } from "svelte/store"; export let data; let posts = readable(data.posts); const extractColumn = (arr, column) => arr.map((x) => x[column]); const allYears = extractColumn(data.posts, "year"); const years = readable ([...new Set(allYears)]); const filter = writable({ year: null }); const filteredPosts = derived([filter, posts], ([$filter, $posts]) => { if (!$filter.year) return $posts; return $posts.filter((x) => x.year === $filter.year); });Entonces, según la lista de publicaciones, puedo obtener la matriz de años para el filtro y luego, con una simple selección, activar la acción de filtrado, y esto funciona bastante bien.
<select bind:value={$filter.year}> {#each $years as year} <option value={year}>{year}</option> {/each} </select>Como decía al principio, la cuestión es cómo añadir complejidad a este escenario para convertir un simple filtro en un sistema, con un número variable de filtros acumulativos dinámicos.
Gracias por cualquier idea.
Puede recorrer los accesorios de un objeto con Object.entries Combine eso con la notación de paréntesis para leer accesorios obj[prop] Agregue una matriz reduce para hacerlo más simple y obtendrá:
return Object.entries($filter) .reduce( (pre, [key, value]) => pre.filter(x => x[key] == value), $posts );Como extra, en realidad podría almacenar matrices en su filtro para que pueda filtrar en múltiples valores:
{ "year": [2022], "colour": ['red', 'green'] } En ese caso, utilice pre.filter(x => values.includes(x[key])) en su lugar.
Para hacer esto más universal, comenzaría generando 'automáticamente' las opciones de filtro.
const filterOptions = derived(posts, $posts => { // set the columns you'd like to have a filter for const columns = ['year', 'language'] // const columns = Object.keys($posts[0]) // or change to this to have a filter for every property return columns.reduce((filterOptions, column) => { filterOptions[column] = extractUniqueColumnValues($posts, column) return filterOptions }, {}) }) function extractUniqueColumnValues (arr, column) { return Array.from(new Set(arr.map((x) => x[column]))) }y mostrarlos así
{#each Object.entries($filterOptions) as [column, values]} {column} <select bind:value={$filter[column]}> <option value={null} ></option> {#each values as value} <option value={value}>{value}</option> {/each} </select> {/each} el filter puede ser simplemente
const filter = writable({}); (Inicialmente se establece en {year: null, language: null} a través de los enlaces de valor seleccionados)
Una forma de filtrar las publicaciones podría ser esta (o usar reduce como muestra la respuesta de Stephane Vanraes)
const filteredPosts = derived([filter, posts], ([$filter, $posts]) => { Object.entries($filter).forEach(([key, value]) => { if(value !== null) $posts = $posts.filter(x => x[key] == value) }) return $posts });Aquí hay un REPL basado en esto