In media lavoro con i dati di tipo JSON 18 volte a settimana. E ho ancora bisogno di cercare su Google modi specifici per manipolarli quasi ogni volta. E se ci fosse una guida definitiva in grado di darti sempre la risposta?

In questo articolo, ti mostrerò le basi per lavorare con gli array di oggetti in JavaScript.

Se non hai mai lavorato con una struttura JSON, hai lavorato con oggetti JavaScript. Letteralmente JSON sta per JavaScript Object Notation.

Si crea un oggetto semplicemente così:

{
  "color": "purple",
  "type": "minivan",
  "registration": new Date('2012-02-03'),
  "capacity": 7
}

Questo oggetto rappresenta un'auto. Ci possono essere auto di molti tipi e colori, ogni oggetto rappresenta quindi un'auto specifica.

purple

Ora, la maggior parte delle volte ottieni dati come questo da un servizio esterno. Ma a volte è necessario creare manualmente oggetti e i loro array. Come ho fatto quando stavo creando questo e-shop:

categories

Considerando che ogni elemento dell'elenco di categorie appare così in HTML:

code

Non volevo che questo codice venisse ripetuto 12 volte, il che lo renderebbe ingestibile.

Creare un array di oggetti

Ma torniamo alle auto. Diamo un'occhiata a questo gruppo di auto:

cars

Possiamo rappresentarlo come un array in questo modo:

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

Gli array di oggetti non rimangono sempre le stessi. Abbiamo quasi sempre bisogno di manipolarli. Diamo quindi un'occhiata a come possiamo aggiungere oggetti a un array già esistente.

Aggiungi un nuovo oggetto all'inizio - Array.unshift

beginning

Per aggiungere un oggetto nella prima posizione, usa Array.unshift.

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.unshift(car);

Aggiungi un nuovo oggetto alla fine - Array.push

ending

Per aggiungere un oggetto nell'ultima posizione, usa Array.push.

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

Aggiungi un nuovo oggetto nel mezzo - Array.splice

middle

Per aggiungere un oggetto nel mezzo, usa Array.splice. Questa funzione è molto utile in quanto può anche rimuovere oggetti. Attenzione ai suoi parametri:

Array.splice(
  {indice dove iniziare},
  {quanti elementi rimuovere},
  {elementi da aggiungere}
);

Quindi se vogliamo aggiungere la Volkswagen Cabrio rossa in quinta posizione, useremo:

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

Iterare attraverso un array di oggetti

A questo punto permettimi di farti una domanda: perché vuoi iterare su un array di oggetti? Il motivo per cui lo chiedo è che il looping non è quasi mai la causa principale di ciò che vogliamo ottenere.

JavaScript fornisce molte funzioni che possono risolvere il tuo problema senza implementare effettivamente la logica in un ciclo generico. Diamo un'occhiata.

Trovare un oggetto in un array in base ai suoi valori - Array.find

Diciamo che vogliamo trovare un'auto rossa. Possiamo usare la funzione Array.find.

cars-colorred
let car = cars.find(car => car.color === "red");

Questa funzione restituisce il primo elemento corrispondente:

console.log(car);
// output:
// {
//   color: 'red',
//   type: 'station wagon',
//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//   capacity: 5
// }

È anche possibile cercare più valori:

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

In questo caso otterremo l'ultima macchina della lista.

Ottenere tutti gli elementi da un array che soddisfano una condizione - Array.filter

La funzione Array.find ritorna un solo oggetto. Se vogliamo ottenere tutte le macchine rosse, dobbiamo usare Array.filter.

cars-colorred2
let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// output:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

Trasformare gli oggetti di un array - Array.map

Questo è qualcosa di cui abbiamo bisogno molto spesso. Trasformare una matrice di oggetti in una matrice di oggetti diversi. Questo è il lavoro di  Array.map. Diciamo che vogliamo classificare le nostre auto in tre gruppi in base alle loro dimensioni.

cars-sizes
let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']

È anche possibile creare un nuovo oggetto se abbiamo bisogno di più valori:

let carsProperties = cars.map(car => {
 let properties = {
   "capacity": car.capacity,
   "size": "large"
 };
 if (car.capacity <= 5){
   properties['size'] = "medium";
 }
 if (car.capacity <= 3){
   properties['size'] = "small";
 }
 return properties;
});
console.log(carsProperties);
// output:
// [
//   { capacity: 7, size: 'large' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 2, size: 'small' },
//   ...
// ]

Aggiungere una proprietà a ogni oggetto di un array - Array.forEach

Ma cosa succede se vogliamo anche le dimensioni dell'auto? In tal caso possiamo inserire nell'oggetto  una nuova proprietà size. Questo è un buon esempio per la funzione Array.forEach.

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

Ordinare un array in base a una proprietà - Array.sort

Quando abbiamo finito di trasformare gli oggetti, di solito abbiamo bisogno di ordinarli in qualche maniera.

In genere, l'ordinamento si basa sul valore di una proprietà dell'oggetto stesso. Possiamo usare la funzione Array.sort, ma dobbiamo fornire una funzione che definisca il meccanismo di ordinamento.

Supponiamo di voler ordinare le auto in base alla loro capacità in ordine decrescente.

cars-sort
let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

La funzione Array.sort confronta due oggetti e mette il primo oggetto al secondo posto se il risultato della funzione di ordinamento è positivo. Quindi puoi considerare la funzione di ordinamento come se fosse una domanda: il primo oggetto dovrebbe essere posizionato al secondo posto?

sort

Assicurati di aggiungere sempre il caso per zero quando il valore confrontato di entrambi gli oggetti è lo stesso per evitare scambi inutili.

Verificare se gli oggetti nell'array soddisfano una condizione - Array.every, Array.includes

Array.every e Array.some tornano utili quando dobbiamo solo controllare ogni oggetto per una condizione specifica.

Abbiamo una cabrio rossa nell'elenco delle auto? Tutte le auto sono in grado di trasportare almeno 4 persone? O più incentrato sul web: c'è un prodotto specifico nel carrello?

cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true

cars.every(car => car.capacity >= 4);
// output: false

Potresti ricordare la funzione Array.includes che è simile a Array.some, ma funzionano solo per i tipi primitivi.

Sommario

In questo articolo, abbiamo esaminato le funzioni di base che ti aiutano a creare, manipolare, trasformare e scorrere gli array di oggetti. Dovrebbero coprire la maggior parte dei casi in cui ti imbatterai.

Se hai un caso d'uso che richiede funzionalità più avanzate, dai un'occhiata a questa dettagliata guida sugli array o visita il riferimento della scuola W3.

O contattami e preparerò un altro articolo :-)