Salve sono uno studente di economia e neofita nel mondo della programmazione ,ho un compito di informatica da svolgere ma non riesco a saltarci fuori ho guardato tutorial,video ecc ma nulla
questo è il compito:
creare una sezione dinamica con Jquery, Ajax e file Json .Attraverso un file Json “listaStati.json” contenente una lista con 250 stati, organizzato con una struttura di dati coppie/valori : codiceST/valore e stato/valore {"codiceST":"UZ", "stato":"Uzbekistan"}, {"codiceST":"QA", "stato":"Qatar"},…ecc. Realizzare una pagina web dinamica che permetta di ricercare i Codici Stato di tutti gli stati che iniziano con la stessa lettera iniziale . se sono presenti, visualizzare in una tabella tutti gli stati che soddisfano il criterio di ricerca ,se non sono presenti, visualizzare un messaggio per avvisare l’utente .La ricerca deve essere case-insensitive: senza distinzione tra maiuscole e minuscole e infine deve essere possibile in qualsiasi momento poter aggiornare la ricerca dinamicamente rimanendo sulla stessa pagina web.
questo e quello che ho provato a fare ma il risultato è una barra di ricerca dove posso scrivere ma non mi esce nessun risultato (il file Jason mi è già stato consegnato dal professore).Utilizzo visual studio per i codici e non capisco se per avere una pagina dinamica devo installare server come xampp o lo stesso java ,quindi se per favore riuscite a chiarirmi questo concetto e in generale darmi qualche consiglio e indirizzarmi. Di seguito quello che ho provato a fare:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>State Search</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h1>State Search</h1>
<label for="searchInput">Enter initial letter:</label>
<input type="text" id="searchInput" maxlength="1">
<button onclick="searchStates()">Search</button>
<div id="result">
</div>
<script src="script.js"></script>
</body>
</html>
Jquey e Ajax
function searchStates() {
var searchLetter = $('#searchInput').val().toUpperCase();
$.ajax({
url: 'listaStati.json',
dataType: 'json',
success: function(data) {
var matchingStates = data.filter(function(state) {
return state.STcode.startsWith(searchLetter);
});
displayResults(matchingStates);
},
error: function() {
$('#result').html('<p>Error loading data</p>');
}
});
}
function displayResults(states) {
var resultContainer = $('#result');
if (states.length > 0) {
var tableHtml = '<table border="1"><tr><th>State Code</th><th>State</th></tr>';
states.forEach(function(state) {
tableHtml += '<tr><td>' + state.STcode + '</td><td>' + state.state + '</td></tr>';
});
tableHtml += '</table>';
resultContainer.html(tableHtml);
} else {
resultContainer.html('<p>No matching states found</p>');
}
}
attendo risposta ,grazie e cordiali saluti.