Press ESC to close

Ordinare un array di oggetti

0 1656

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.

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.

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.

Alcuni link utili

Indice tutorial JavaScript

Le funzioni di callback

Esempi funzioni di callback

Come utilizzare le callback e setTimeout

Cifrario di Cesare online

Come realizzare un convertitore da decimale a binario, ottale ed esadecimale

Come creare PDF con JavaScript

PDF da un form con JavaScript

Proprietà di un PDF con JavaScript

Libreria jsPDF

Other stories

reverse JavaScript

Next Story

Slot machine JavaScript

Previous Story