Foreach in JavaScript: gestire gli array associativi
Oggi ho avuto l’esigenza di implementare un sistema asincrono su di un sito.
Il trasferimento dei dati lo gestisco con JSON, che rende il passaggio dei dati snello e di facile manipolazione.
Fino a quando gestivo i dati in PHP, utilizzare gli array associativi era molto semplice. Ma ad un certo punto ho avuto l’esigenza di creare del codice JavaScript per compilare delle list-box in tempo reale.
Proprio a questo punto mi sono reso conto di non saper come recuperare i dati da un array associativo con un ciclo (in JavaScript, ndr.).
Un array associativo è un array di questo tipo:
L’utilità nell’utilizzare un array associativo è dato dal fatto che, nel caso specifico, posso selezionare tutti i valori relativi ad una determinata marca, senza dover sapere in quale posizione dell’array è presente il dato.
In JavaScript lo stessa variabile la si potrebbe creare in questo modo:
Per elencare in maniera ciclica tutti i dati occorre fare ricorso ad una struttura logica conosciuta come Foreach. Volendola applicare in PHP avremmo un codice simile al seguente:
Anche in JavaScript esiste una struttura logica che esegue questa funzione, ma non si chiama Foreach. Mostro direttamente il codice così da essere subito chiaro:
In effetti è sempre il solito for, ma con una condizione differente che permette di analizzare un array associativo.
Attenzione a scrivere la condizione. L’array è il secondo elemento e va messo dopo la particella in. La prima variabile è quella che conterrà il valore dell’indice.
Ottimo! Mi complimento con l’autore perchè ha spiegato in maniera semplice e coincisa questo sistema.
Mi permetto di sottolineare (a tutti quelli che hanno sbagliato come me)
che array_associativo = new Object() e non new Array()
perchè se noi utilizzassimo un Array al posto di un Object avremo ulteriori KEYS oltre a quelle che ci interessano, che sono:
each
eachSlice
all
any
collect
detect
findAll
grep
…
ecc, ecc. che sicuramente ci scombussolerebbero i risultati previsti.
Ottima precisazione!
Utile, mi serviva per leggere un array associativo proveniente da json_encode di php
Potrei far notare che il codice dell’array in php riportato qui sopra è errato?!?!:
$array_associativo = array (
‘Fiat’=>500,
‘Fiat’ => 600,
‘Fiat’=>’Punto’,
‘Fiat’=>’Bravo’,
‘Alfaromeo’=>’156′,
‘Alfaromeo’ => ‘157 ‘,
‘Alfaromeo’=>’159′,
‘Mercedes’ => ‘C180′
);
Voglio far notare che tale codice se lo si fà eseguire non darà il risultato voluto, riporto il mio codice di testing perchè mi sembrava strano ma prima di scrivere ho voluto fare una prova:
$array_associativo = array (
‘Fiat’=>500,
‘Fiat’ => 600,
‘Fiat’=>’Punto’,
‘Fiat’=>’Bravo’,
‘Alfaromeo’=>’156′,
‘Alfaromeo’ => ‘157 ‘,
‘Alfaromeo’=>’159′,
‘Mercedes’ => ‘C180′
);
echo “”;
echo var_dump($array_associativo);
echo “”;
e il risultato è:
array(3) {
["Fiat"]=>
string(5) “Bravo”
["Alfaromeo"]=>
string(3) “159″
["Mercedes"]=>
string(4) “C180″
}
Spiegazione:
Non si può avere lo stesso indice per due valori differenti nello stesso array, conseguentemente php sovrascrive i valori precedenti dello stesso indice con l’ultimo inserito.
PS:
Le virgolette in alcuni lavori erano sbagliate: ′ => ‘
@Marino Bonetti
Ciao, ottime precisazioni.
Per quanto riguarda le virgolette, comunque, è colpa del sistema di correzione dei caratteri di Wordpress, comunque è utile che si sappia, altrimenti chi è meno smaliziato, si troverebbe in serie difficoltà.
Per quanto riguarda la struttura dell’array, beh li ho preso una bella “cantonata”. Il modo migliore per rappresentarlo era:
$array_associativo = array (
‘Fiat’ => array (
500,
600,
‘Punto’,
‘Bravo’
),
‘Alfaromeo’ => array (
156,
157,
159
),
‘Mercedes’ => ‘C180′’
);
Già…ma sarebbe stato un pò fuorviante far vedere array di array…ho voluto far notare la cosa perchè mi ha fatto venire per un momento anche a me il dubbio di aver sbagliato a fare gli array negli ultimi anni….infatti per non sbagliare ho anche fatto un test.
E’ stato un piacere essere d’aiuto.
PS.
Mi serviva proprio l’esempio del js Ottima spiegazione.
l’esempio funziona anke dando come oggetto new Array(); alla variabile array_associativo