Ordinare un array di oggetti, usare sort e una funzione

In questa lezione vedremo come ordinare un array di oggetti.

Supponiamo di avere sempre il nostro array di auto e di volerlo ordinare in base all’anno.

Quindi chiaramente dobbiamo comparare tra di loro i diversi anni.

Scriviamo dunque una funzione che mi permette di fare questo in modo da richiamarla in seguito all’interno del metodo sort. Ricordiamo infatti che il metodo sort consente di ordinare un array.

Ordinare un array di oggetti – esercizio

Dunque come primo passo creiamo il nostro array di oggetti:

var auto = [
  {
    marca: 'Fiat',
    modello: '500',
    colore: 'bianco',
    alimentazione: 'benzina',
    anno: 2010,
    cavalli: 69
  },
  {
    marca: 'Fiat',
    modello: 'tipo',
    colore: 'grigio',
    alimentazione: 'diesel',
    anno: 2012,
    cavalli: 95
  },
  {
    marca: 'Porche',
    modello: 'Cayenne',
    colore: 'grigio',
    alimentazione: 'diesel',
    anno: 2019
  },
  {
    marca: 'Jeep',
    modello: 'Compass',
    colore: 'bianco',
    alimentazione: 'diesel',
    anno: 2016
  },
  {
    marca: 'Lancia',
    modello: 'Y',
    colore: 'verde',
    alimentazione: 'benzina',
    anno: 2014
  }
];

Per poter ordinare un array di oggetti, nel nostro caso l’array auto, analizziamo il metodo sort.

Banner Pubblicitario

Ricordiamo anche che sort nel caso dei numeri può dare risultati errati, ma ricordiamo anche che il metodo sort può accettare un parametro opzionale.

Ecco il link di esempio sul sito w3school:

https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_sort2

In questo esempio a sort viene passata una funzione che restituisce un valore positivo, negativo oppure zero.

Quindi, anche nel nostro caso, facciamo restituire uno di questi 3 valori. In definitiva:

– se marca.anno dell’oggetto 1 è maggiore di marca.anno dell’oggetto 2 restituiamo 1;

– se marca.anno dell’oggetto 2 è maggiore di marca.anno dell’oggetto 2 restituiamo -1;

– invece se sono uguali restituiamo 0.

Banner pubblicitario

Ecco dunque la semplicissima funzione, per ordinare un array di oggetti, che andremo a creare:

function maggiore(a,b) {
  if (a.anno < b.anno){
    return -1;
  }
  else if (a.anno > b.anno){
    return 1;
  }
  return 0;
}

Dopo richiamiamo il metodo sort, sull’array auto, ed effettuiamo il console.log per vedere il nostro array di oggetti ordinato in base all’anno.

auto.sort(maggiore);

console.log(auto);

Possiamo anche creare un ordinamento generico in base alla proprietà.

Quindi passiamo alla funzione maggiore l’argomento k che sta per chiave.

function maggiore(key) {
  return function (a,b) {
         var risultato = 0;
         if (a[key] > b[key]) {
              risultato = 1;
          } else if (a[key] < b[key]) {
              risultato = -1;
          }
            return risultato;
        }
}

Infine si può decidere per un ordinamento in ordine decrescente passando un secondo parametro che serve a stabilire il tipo di ordine. Se viene passato come argomento desc, basta moltiplicare il risultato per -1, al fine di ottenere il risultato desiderato.

Ecco dunque la funzione completa:

function maggiore(key, ordine) {
  return function (a,b) {
         var risultato = 0;
         if (a[key] > b[key]) {
              risultato = 1;
          } else if (a[key] < b[key]) {
              risultato = -1;
          }
          if(ordine == 'desc'){
            risultato *= -1;
          }
            return risultato;
        }
}

Per chi volesse approfondire l’argomento, allego un link di riferimento: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

In questa lezione abbiamo visto come ordinare un array di oggetti utilizzando una semplice funzione.

Lezione precedente: esercizi sugli oggetti ed array

Lezione successiva: Introduzione a JSON