Array di oggetti, costruire array di oggetti in JavaScript

In questa lezione affronteremo gli array di oggetti.

Abbiamo già visto nelle lezioni precedenti come un array può contenere numeri e stringhe.

Esercizio 1 – creare un array di oggetti

Progettare l’array canzoni che contiene degli oggetti: canzone1, canzone2, ecc… Ogni oggetto contiene delle proprietà, ad esempio: titolo, nomeCantante e anno.
Inserire poi alcuni dati, direttamente da codice, a piacere e visualizzarli (anche semplicemente ocn il console.log per il momento). Dopo fare inserire all’utente delle nuove canzoni attraverso il prompt dei comandi con tutte le proprietà indicate.
Visualizzare infine l’array cantanti così costruito.

Quindi creiamo un array con due oggetti: canzone1 e canzone2 e specifichiamo le proprietà per ciascun oggetto. Dopo con dei prompt facciamo inserire i dati all’utente. Tramite il metodo push inseriamo l’elemento in canzoni.

Infine visualizziamo l’array con i 3 elementi. Possiamo anche tralasciare i nomi canzone1, canzone2 ecc.. in quanto in un array gli elementi sono individuati tramite l’indice che, ricordiamo, parte da 0. In questo esempio scegliamo di lasciare i nomi.

Ecco di seguito il codice completo:

var canzoni = [
  canzone1 = {
    titolo: 'Stairway to Heaven',
    nomeCantante: 'Led Zeppelin',
    anno: '1971'
  },
  canzone2 = {
    titolo: 'Wish you were here',
    nomeCantante: 'Pink Floyd',
    anno: '1975'
  }
];
console.log(canzoni);

canzone3 = {
    titolo : prompt('Inserisci il titolo'),
    nomeCantante: prompt('Inserisci il nome del cantante o gruppo'),
    anno: prompt('Inserisci l\'anno'),
};

canzoni.push(canzone3);
console.log(canzoni);

Possiamo anche inserire gli elementi in questo modo.

var canzoni = [
  canzone1 = {
    titolo: 'Stairway to Heaven',
    nomeCantante: 'Led Zeppelin',
    anno: '1971'
  },
  canzone2 = {
    titolo: 'Wish you were here',
    nomeCantante: 'Pink Floyd',
    anno: '1975'
  }
];
console.log(canzoni);

var t = prompt('Inserisci il titolo');
var n = prompt('Inserisci il nome del cantante o gruppo');
var a = prompt('Inserisci l\'anno'),

canzone3 = {
    titolo : t,
    nomeCantante: n,
    anno: a,
};

canzoni.push(canzone3);

console.log(canzoni);

Esercizio 2 – creare un array di oggetti

Progettare un array rubrica che contiene degli oggetti: utente1, utente2, ecc… Dopo, per ogni utente, specificare altre proprietà: nome, cognome, telefono e indirizzo. Dove indirizzo è a sua volta un altro oggetto contenente altre proprietà.
Quindi popolare la rubrica con dei dati a piacere. Dopo eliminare un elemento e visualizzare nuovamente la rubrica così ottenuta.

Questo esercizio è molto simile al precedente, occorre solo prestare attenzione perché ci troviamo di fronte ad un oggetto nidificato.

Dunque ci comportiamo come nell’esempio sopra, ma per quanto riguarda l’inserimento, potremmo lavorare in questo modo:

var rubrica = [
  utente1 = {
    nome: 'Coding',
    cognome: 'Creativo',
    telefono: '333',
    indirizzo: {
      via: 'delle rose',
      citta: 'Modica'
    }
  },
  utente2 = {
    nome: 'Creativo',
    cognome: 'Coding',
    telefono: '124',
    indirizzo: {
      via: 'delle rose',
      citta: 'Modica'
    }
  }
];

var  utente3 = {
    nome : prompt('Inserisci il nome'),
    cognome: prompt('Inserisci il cognome'),
    telefono: prompt('Inserisci il telefono'),
    indirizzo: {
      via: prompt('Inserisci il nome della via'),
      citta: prompt('Inserisci la città')
    }
  };

rubrica.push(utente3);

console.log(rubrica);

Volendo fare dei controlli dell’input, potremmo utilizzare il ciclo while o do-while, come da esempio sotto:

var rubrica = [
  utente1 = {
    nome: 'Coding',
    cognome: 'Creativo',
    telefono: '333',
    indirizzo: {
      via: 'delle rose',
      citta: 'Modica'
    }
  },
  utente2 = {
    nome: 'Creativo',
    cognome: 'Coding',
    telefono: '124',
    indirizzo: {
      via: 'delle rose',
      citta: 'Modica'
    }
  }
];

do {
  var n = prompt('Inserisci il nome');
} while (n == "");


var  utente3 = {
    nome : n,
    cognome: prompt('Inserisci il cognome'),
    telefono: prompt('Inserisci il telefono'),
    indirizzo: {
      via: prompt('Inserisci il nome della via'),
      citta: prompt('Inserisci la città')
    }
  };

rubrica.push(utente3);

console.log(rubrica);

In questo caso se l’utente non inserisce nulla, lasciando dunque la stringa vuota, viene richiesto nuovamente di inserire il nome.

Chiaramente questo è solo un esempio di possibile soluzione del seguente esercizio, proponete pure la vostra nei commenti sotto.

In questa lezione abbiamo visto come lavorare con gli array di oggetti e abbiamo fatto alcuni esempi, nella prossima vedremo altri esempi.

Lezione precedente: oggetti nidificati

Lezione successiva: ciclo for in