Ricerca in un array di oggetti
Qui trovate tutti i codici utilizzati per l'esercizio. Sono tutti ampiamente spiegati e commentati. Fate attenzione perchè i collegamenti ai file dipendono da dove sono collocati; Struttura che ho utilizzato io:
- regioni-italiane
- css
- index.html
- index.js
- regioni.js
index.html
Normalissima pagina HTML basata su bootstrap
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Regioni Italiane</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="jumbotron jumbotron-fluid py-4 bg-dark text-light">
<div class="container">
<h1 class="display-4">Regioni</h1>
<p>Esercizio su for e gli array</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-sm mb-2">
<input type="text" class="form-control" id="input-ricerca"
placeholder="testo da ricercare" />
</div>
<div class="col col-sm-auto">
<button type="button" class="btn btn-success w-100" id="btn-regione">
Regione
</button>
</div>
<div class="col col-sm-auto">
<button type="button" class="btn btn-info w-100" id="btn-sigla">
Sigla
</button>
</div>
<div class="col col-sm-auto">
<button type="button" class="btn btn-dark w-100" id="btn-capoluogo">
Capoluogo
</button>
</div>
</div>
</div>
<div class="container">
<h2>Risultati</h2>
<p id="risultato"></p>
</div>
<script src="regioni.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
/*
Le variabili contengono il riferimento agli
elementi dell'interfaccia che devo utilizzare
*/
// Campo di input (input#input-ricerca)
var userInput = document.getElementById('input-ricerca');
// Bottone sigla (button#btn-sigla)
var bottoneSigla = document.getElementById('btn-sigla');
// Risultato della ricerca (p#risultato)
var output = document.getElementById('risultato');
/* =====================================================
GESTORE EVENTO CLICK
=====================================================*/
bottoneSigla.addEventListener('click', function() {
// Assegno a q la stringa inserita dall'utente convertendola in maiuscolo
var q = userInput.value.toUpperCase();
// Con un ciclo fo scorro tutte le regioni
for (var i = 0; i < regioni.length; i++){
var regione = regioni[i];
// Per ogni regione estraggo le proprietà province e capoluoghi
var sigle = regione.province;
var caps = regione.capoluoghi;
// con un ulteriore ciclo for esamino tutte le sigle dell'array sigle
for(var k = 0; k < sigle.length; k++) {
// Se trovo quella inserita dall'utente compongo il messaggio
// lo metto in p#output e interrompo il ciclo
if (sigle[k] == q) {
output.innerHTML = "La sigla " + q + " corrisponde al capoluogo " +
caps[k] + " (" + regione.nome + "),";
return;
}
}
}
})
regioni.js
L'array di oggetti su cui sono effettuate le ricerche:
var regioni =
[
{
"nome": "Abruzzo",
"capoluoghi": ["Chieti", "L'Aquila", "Pescara", "Teramo"],
"province":["CH","AQ","PE","TE"]
},
{
"nome": "Basilicata",
"capoluoghi": ["Matera", "Potenza"],
"province":["MT","PZ"]
},
{
"nome": "Calabria",
"capoluoghi": ["Catanzaro", "Cosenza", "Crotone", "Reggio Calabria", "Vibo Valentia"],
"province":["CZ","CS","KR","RC","VV"]
},
{
"nome": "Campania",
"capoluoghi": ["Avellino", "Benevento", "Caserta", "Napoli", "Salerno"],
"province":["AV","BN","CE","NA","SA"]
},
{
"nome": "Emilia-Romagna",
"capoluoghi": ["Bologna", "Ferrara", "Forlì-Cesena", "Modena", "Parma", "Piacenza", "Ravenna", "Reggio Emilia", "Rimini"],
"province":["BO","FE","FC","MO","PR","PC","RA","RE","RN"]
},
{
"nome": "Friuli-Venezia Giulia",
"capoluoghi": ["Gorizia", "Pordenone", "Trieste", "Udine"],
"province":["GO","PN","TS","UD"]
},
{
"nome": "Lazio",
"capoluoghi": ["Frosinone", "Latina", "Rieti", "Roma", "Viterbo"],
"province":["FR","LT","RI","RM","VT"]
},
{
"nome": "Liguria",
"capoluoghi": ["Genova", "Imperia", "La Spezia", "Savona"],
"province":["GE","IM","SP","SV"]
},
{
"nome": "Lombardia",
"capoluoghi": ["Bergamo", "Brescia", "Como", "Cremona", "Lecco", "Lodi", "Mantova", "Milano", "Monza e Brianza", "Pavia", "Sondrio", "Varese"],
"province":["BG","BS","CO","CR","LC","LO","MN","MI","MB","PV","SO","VA"]
},
{
"nome": "Marche",
"capoluoghi": ["Ancona", "Ascoli Piceno", "Fermo", "Macerata", "Pesaro e Urbino"],
"province":["AN","AP","FM","MC","PU"]
},
{
"nome": "Molise",
"capoluoghi": ["Campobasso", "Isernia"],
"province":["CB","IS"]
},
{
"nome": "Piemonte",
"capoluoghi": ["Alessandria", "Asti", "Biella", "Cuneo", "Novara", "Torino", "Verbano Cusio Ossola", "Vercelli"],
"province":["AL","AT","BI","CN","NO","TO","VB","VC"]
},
{
"nome": "Puglia",
"capoluoghi": ["Bari", "Barletta-Andria-Trani", "Brindisi", "Lecce", "Foggia", "Taranto"],
"province":["BA","BT","BR","LE","FG","TA"]
},
{
"nome": "Sardegna",
"capoluoghi": ["Cagliari", "Carbonia-Iglesias", "Medio Campidano", "Nuoro", "Ogliastra", "Olbia-Tempio", "Oristano", "Sassari"],
"province":["CA","CI","VS","NU","OG","OT","OR","SS"]
},
{
"nome": "Sicilia",
"capoluoghi": ["Agrigento", "Caltanissetta", "Catania", "Enna", "Messina", "Palermo", "Ragusa", "Siracusa", "Trapani"],
"province":["AG","CL","CT","EN","ME","PA","RG","SR","TP"]
},
{
"nome": "Toscana",
"capoluoghi": ["Arezzo", "Firenze", "Grosseto", "Livorno", "Lucca", "Massa e Carrara", "Pisa", "Pistoia", "Prato", "Siena"],
"province":["AR","FI","GR","LI","LU","MS","PI","PT","PO","SI"]
},
{
"nome": "Trentino-Alto Adige",
"capoluoghi": ["Bolzano", "Trento"],
"province":["BZ","TN"]
},
{
"nome": "Umbria",
"capoluoghi": ["Perugia", "Terni"],
"province":["PG","TR"]
},
{
"nome": "Valle d'Aosta",
"capoluoghi": ["Aosta"],
"province":["AO"]
},
{
"nome": "Veneto",
"capoluoghi": ["Belluno", "Padova", "Rovigo", "Treviso", "Venezia", "Verona", "Vicenza"],
"province":["BL","PD","RO","TV","VE","VR","VI"]
}
];