domenica, aprile 19, 2009

Gli array associativi in Javascript ...

Oggi ho proprio voglia di scrivere qualcosa di tecnico.
Alla fin fine per guadagnarmi il pane faccio il programmatore e condividere delle soluzioni puo' essere utile (e questo tutti gli sviluppatori lo sanno!).
Quindi, il problema che dovevo risolvere era questo:

"In una jsp, selezionando un valore da una select bisogna riempirne opportunamente un'altra."

Non sembra la fine del mondo ... uno potrebbe dire: "che ci vuole!"
Ok, ma quando i dati sono dinamici e presi da un DB ... forse non e' cosi' banale.
E poi ad ogni valore della prima select alla seconda sono associati un numero variabile di elementi.
Mi serviva una soluzione semplice ed efficacie, che si potesse dinamicizzare.

Ho risolto il problema con gli array associativi in javascript.

Vediamo prima di tutto cos'e' un array associativo. In javascript si puo' definire cosi':

arrayAssociativo = new Array();
arrayAssociativo["Val1"] = "SubVal1";
arrayAssociativo["Val2"] = "SubVal2";
arrayAssociativo["Val3"] = "SubVal3";

E per recuperare un valore basta usare, ad es: arrayAssociativo["Val1"];

Quindi possiamo appunto "associare" ad una stringa un altro oggetto.

Un altro modo per definire l'array associativo (ed e' quello che preferisco) e' questo:

var arrayAssociativo = {"Val1":"SubVal1", "Val2":"SubVal2", "Val3":"SubVal13};

Molto piu' "professionale" direi :)

Cmq, il trucco sta in questa seconda definizione, infatti (complicando le cose) posso scrivere un array associativo di questo tipo:

var arrayOfValue = [{firstValue: 'Val 1', secondValue: new Array('SubVal 1-1', 'SubVal 1-2', 'SubVal 1-3', 'SubVal 1-4')}, {firstValue: 'Val 2', secondValue: new Array('SubVal 2-1', 'SubVal 2-2')}, {firstValue: 'Val 3', secondValue: new Array('SubVal 3-1', 'SubVal 3-2', 'SubVal 3-3')}];

In pratica ho associato alle stringhe che stanno su firstValue un array semplice sul secondValue.

La funzione javascript che gestisce lo switch dei valori si puo' scrivere cosi':

// Funzione per eseguire lo switch
// I parametri:
// destination - la select di destinazione
// value - il valore della prima select
function fillSelect(destination, value) {

// verifico se e' stata fatta una scelta valida
if(value == undefined || value == "") {
destination.setAttribute('disabled', 'disabled');
return;
}

// svuoto la select
while( destination.childNodes.length >= 1 ) {
destination.removeChild( destination.firstChild );
}

// il primo elemento e' vuoto
destination.options[0] = new Option('', '');

// itero l'array associativo per trovare il valore giusto
var arraySecondValues = [];
for(var j=0; j < arrayOfValue.length; j++) {
if(arrayOfValue[j].firstValue == value) {
arraySecondValues = arrayOfValue[j].secondValue;
break;
} else {
continue;
}
}

// adesso itero l'array recuperato
// con i valori da copiare nella seconda select
for(var i=0; i < arraySecondValues.length; i++) {

// uso "i + 1" perche' ho gia' definito il primo elemento
// della select con uno spazio vuoto
destination.options[i + 1] = new Option(arraySecondValues[i], arraySecondValues[i]);
}

destination.options.length = i + 1;
destination.removeAttribute('disabled');
}

Il codice html:

<form name="testForm" method="post" action="" id="testForm">
Prima select: <br/>
<select name="firstSelect" onchange="fillSelect(document.testForm.secondSelect, this.value);">
<option value=""></option>
<option value="Val 1">Val 1</option>
<option value="Val 2">Val 2</option>
<option value="Val 3">Val 3</option>
</select>
<br/><br/>
Seconda select: <br/>
<select name="secondSelect" disabled="disabled"><option value=""></option></select>
</form>

Ed il gioco e' fatto. L'unica cosa che dobbiamo dinamicizzare nella nostra jsp e' l'array associativo e i dati della prima select. Io ho usato un bean con due liste riempite con i dati presi dal DB per poi utilizzare la funzione JSTL <c:forEach> a dovere.


Per testare il codice:
Prima select:

Seconda select:

Etichette: , , ,


Condividi questo Articolo:   Bookmark and Share

7 Commenti:

Anonymous Anonimo said...

a me mi piace questo articolo

30/11/10 3:45 PM  
Blogger Francesco said...

@anonimo: Grazie ^_^

30/11/10 4:01 PM  
Anonymous Anonimo said...

grazieeee

7/1/11 10:58 PM  
Anonymous Anonimo said...

complimenti per il lavoro fatto. Premetto che sono alle primissime armi con javascript e per questo non riesco a fare una cosa che ti sembrerà banale.

Ho creato un array associativo in javascript del tipo


var markers = [{luogo:'Via Giovanni Verga, 3, 70020 Bitritto Bari', lat:'41.044875', lon:'16.827915', tipo:'Consiglio'},{luogo:'...', ...}];

come faccio a prenderne i valori? ovviamente ho pensato ad un ciclo for... ma come faccio a far riferimento agli elementi dell'array?

ti ringrazio in anticipo.

31/10/11 3:17 PM  
Blogger Francesco said...

Ciao altro Anonimo :)
Perdonami innanzi tutto se non ho risposto subito.

La soluzione e' semplice, dato che hai definito l'array in questo modo:

var markers = [{luogo:'Via Giovanni Verga, 3, 70020 Bitritto Bari', lat:'41.044875', lon:'16.827915', tipo:'Consiglio'},{luogo:'...', ...}];

con oggetti dello stesso tipo, il ciclo principale lo puoi fare sulla lunghezza dell'array markers:

for(var i=0; i < markers.length; i++) {
...
}


Per poi usare gli elementi cosi':

for(var i=0; i < markers.length; i++) {
var luogo = markers[i].luogo;
var latitudine = markers[i].lat;
var longitudine = markers[i].lon;
var tipo = markers[i].tipo;

// e qui puoi sfruttare le variabili per quello che ti serve fare

}


Spero di esserti stato d'aiuto. Grazie di esser passato :)

3/11/11 10:43 PM  
Anonymous Anonimo said...

Ciao, sono alle prime armi e ho un problema. Data una matrice in Java fomrata dai campi
Prodotto-articolo-taglia-colore devo cercare il prodotto è restituire i valori di articolo taglia e colore. Sono tutti codici e devono essere interi (no stringhe) utilizzabili per essere stampati a video ed essere utilizzati per operazioni di calcolo. Riesci please a darmi una mano?

1/3/15 12:20 AM  
Blogger Francesco said...

Ciao Anonimo, all'inizio pensavo che volessi consigli su del codice javascript, poi ho letto meglio. Java :)
No problem, se ho capito bene potresti fare una cosa del genere:
http://fmonaca.altervista.org/code/Matrici.java
Ho scritto un programmino al volo, spero che sia quello che ti serve. Ciao e grazie di essere passato :)

1/3/15 5:50 PM  

Posta un commento

Io sono per la comunicazione libera senza blocchi, ma dato che comunque questo e' il mio spazio personale e personalmente non sopporto chi commenta usando un linguaggio volgare mi vedo costretto a moderare i commenti.
Abbiate pazienza.

Links to this post:

Crea un link

<< Home