jQuery Tutorial: Filtrare un set di risultati

Immagina di voler realizzare un elenco di oggetti e di far sì che, dopo una scelta per step, il tuo utente visualizzi il risultato desiderato. Come si può fare?

Nell’esempio che ti mostrerò, ipotizziamo di inserire manualmente i dati direttamente all’interno dello script, ciò non toglie che il meccanismo possa essere applicato anche laddove questi dati arrivino, per esempio, da un json (con le dovute modifiche).

Bando alle ciance, creiamo un set di oggetti e la form necessaria per permettere di effettuare questa scelta. Il nostro miglior amico in questo tutorial, sarà la funzione .filter() di jQuery.

Creare un Array con i nostri oggetti

Immaginiamo di creare un set di 3 oggetti, per esempio tre mobili con colore e prezzo differenti. La prima cosa da fare sarà quella di inserire questi oggetti in un array, all’interno del quale andremo poi ad effettuare la nostra ricerca. Per farlo creiamo un bel file che chiamiamo filter.js:

$(function(){
    var items = [
        { id: 01, nome: "Mobile 01", categoria: "Mobili", colore: "Nero", prezzo: "€1.280,00"},
        { id: 02, nome: "Mobile 02", categoria: "Mobili", colore: "Bianco", prezzo: "€658,00"},
        { id: 03, nome: "Mobile 03", categoria: "Mobili", colore: "Marrone", prezzo: "€570,00"}
    ];
});

Come puoi vedere abbiamo creato una variabile items, che costituisce il nostro array composto da 3 oggetti, differenziati tra loro per alcune semplici proprietà (id, nome, categoria, colore, prezzo).

Filtrare e mostrare oggetti in base a parametri specifici

Una volta creato il nostro array possiamo andare a filtrare gli oggetti che ci interessano grazie alla funzione filter().

var filteredItems = $(items).filter(function( idx ) {
    return items[idx].categoria == "Mobili" && items[idx].colore == "Nero";
});

Creiamo quindi una nuova variabile filteredItems, che conterrà gli oggetti di nostro interesse. Nell’esempio sopra riportato stiamo filtriamo items per recuperare tutti gli oggetti con categoria “Mobili” e colore “Nero”. Quindi stiamo recuperando l’oggetto identificato con il nome “Mobile 01”. Ma come facciamo a verificare che cosa sta realmente accadendo?

Usiamo la funzione .each() per attraversare l’array e restituire uno ad uno i risultati filtrati e, di questi ultimi, stampiamo nome e prezzo all’interno di un div chiamato output:

$(filteredItems).each(function(){
    $('#output').append(this.nome+" : "+this.prezzo+"<br>");
});

A questo punto, se abbiamo fatto tutto correttamente, nella nostra pagina HTML (dove dovremo aver incluso jQuery, il nostro script e il div output) otterremo il nome ed il prezzo dell’oggetto desiderato. Lo script completo fino a qui è il seguente:

$(function(){
var items = [
{ id: 01, nome: “Mobile 01”, categoria: “Mobili”, colore: “Nero”, prezzo: “€1.280,00”},
{ id: 02, nome: “Mobile 02”, categoria: “Mobili”, colore: “Bianco”, prezzo: “€658,00”},
{ id: 03, nome: “Mobile 03”, categoria: “Mobili”, colore: “Marrone”, prezzo: “€570,00”}
];

var filteredItems = $(items).filter(function( idx ) {
return items[idx].categoria == “Mobili” && items[idx].colore == “Nero”;
});

$(filteredItems).each(function(){
$(‘#output’).append(this.nome+” : “+this.prezzo+”
”);
});
});

See the Pen RNvKbM by Davide De Maestri (@gleenk) on CodePen.
13441

Il passo successivo da fare, è quello di rendere dinamici i valori che passiamo allo script, per esempio da una form, affinchè il tutto abbia qualche funzione reale e non solo dimostrativa 🙂

Parametri dinamici per filtrare gli oggetti

Quello che dovremo fare sarà di passare i valori ottenuti dalle select e passarli allo script in modo da ottenere il risultato desiderato. Per maggiori spiegazioni vi lascio alla lettura dello script completo che ho realizzato:

$(function(){
choose();
});

function filtraOggetti(s_categoria, s_colore){

var items = [
{ id: 01, nome: “Mobile 01”, categoria: “Mobili”, colore: “Nero”, prezzo: “€1.280,00”},
{ id: 02, nome: “Mobile 02”, categoria: “Mobili”, colore: “Bianco”, prezzo: “€658,00”},
{ id: 03, nome: “Mobile 03”, categoria: “Mobili”, colore: “Marrone”, prezzo: “€570,00”},
{ id: 04, nome: “Mobile 04”, categoria: “Mobili”, colore: “Marrone”, prezzo: “€970,00”}
];

var filteredItems = $(items).filter(function( idx ) {
return items[idx].categoria == s_categoria && items[idx].colore == s_colore;
});

if(s_categoria != “” && s_colore != “”){
$(“#output”).fadeIn();
$(‘#output .result-items .result’).remove();
}
$(filteredItems).each(function(){
$(‘#output .result-items’).append(“

function choose(){

$(“select”).on(‘change’,function(){
getCategoria = $(“#sel-categoria”).val();
getColore = $(“#sel-colore”).val();
filtraOggetti(getCategoria, getColore);
});

}

See the Pen yyZgaN by Davide De Maestri (@gleenk) on CodePen.
13441