Come ordinare oggetti JSON con jQuery

image

In ufficio, stiamo lavorando ad una applicazione web che esegue una ricerca su un vasto campi di input che filtrano la ricerca. Una volta inviato il form, l’applicazione (nello specifico, una funzione in PHP), restituisce un risultato in JSON.

Per ordinare il risultato via front-end, si è deciso di prendere una proprietà numerica da un oggetto, e quindi ordinare facendo confronti a due su questi valori. Il JSON che ne è venuto fuori è qualcosa del genere:

[{
"proprieta": dati1,
"ordine": 1
},
{
"proprieta": dati,
"ordine": 8 },
{
"proprieta": dasa,
"ordine": 2 }]

Dunque, l’obiettivo è farsi restituire tutti questi dati e manipolarli in modo che vengano ordinati per ‘ordine’ crescente. Poiché l’ordinamento deve avvenire solo e soltanto quando PHP ci ritorna il JSON, si rivela particolarmente utile il $.ajax di jQuery:

(function ($) {
    $('#selettore').on('click', function () {
        $.ajax({
            url: 'url/script.php',  // indirizzo dello script in PHP
            data: null,             // Non passiamo nulla
            dataType: 'json',       // Esplicito il tipo di dato di ritorno
            type: 'GET',

            success: function (data) {
                // Ordiniamo i dati restituiti con la classica funzione di ordinamento
                var ord = data.sort(function (n1, n2) {
                    if (n1.ordine > n2.ordine) {
                        return 1;
                    }
                    if (n1.ordine < n2.ordine) {
                         return -1;
                    }

                    return 0;
                });
               
                // Assegnamo la stringa che conterra' tutto l'insieme
                var string = '';
                
                // Concateniamo a string il tutto
                ord.each(function (index, val) {
                    string += ', ' + val.ordine;   
                });
                
                // Mostriamo il risultato nel tag con id 'risultato'
                $('#risultato').text(string); // 1, 2, 8
            },
            
            error: function (xhr, status, text) {
                console.log(status + ' ' + text);
            }
        });
    });
})(jQuery);

Per attuare questa semplice e indolore tecnica, è necessario che lo script lato server sia progettato per restituire un array di oggetti, piuttosto che di un elenco di oggetti.

Lascia un commento

Il tuo indirizzo email non sarĂ  pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.