Ciao,
cercavo di imparare a leggere un file in locale, per cui mi sono messo a studiare il seguente codice (che riporto integralmente) del libro, ma ho già un primo errore:
Il codice non è da me modificato, ma un semplice copia e incolla dal libro dell'autore, ok ?
Html:
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>JSON 1</title>
<meta name="description" content="JSON 1">
</head>
<body>
<p id="output" />
<script type="text/Javascript">
'use strict';
const file = 'persona.json';
// Creo un oggetto XMLHttpRequest per fare la chiamata al servizio
// vedi https://developer.mozilla.org/it/docs/Web/API/XMLHttpRequest
const request = new XMLHttpRequest();
//altrimenti si aspetta un XML
request.overrideMimeType('application/json');
// Definisco quale file (file) e come chiamarlo (comando GET)
request.open('GET', file, true);
// Definisco cosa fare quando il servizio mi risponde
// la funzione onload sarà chiamata dopo l'arrivo della risposta
// la funzione onload è una funzione callback
request.onload = function () {
//dato è un oggetto, perhè il file json contiene un solo oggetto
const dato = JSON.parse(this.responseText);
let HTML = `<div><h1>${dato.nome} ${dato.cognome}</h1></div>`;
mostraRisultato(HTML);
};
// Definisco cosa fare quando la chiamata al servizio fallisce
// è una funzione callback richiamata in caso di errore (passato come argomento)
request.onerror = errore => mostraRisultato(`<pre>ERRORE: ${errore}</pre>`);
// Chiama il servizio. Di fatto inizia la chiamata che procede come processo in background
// la funzione send() termina SENZA attendere il completamento della chiamata che
// avviene in modalità ASINCRONA
request.send(null);
// mostra il testo passato come argomento come inner HTML di un elememnto del DOM
const mostraRisultato = testo => document.getElementById('output').innerHTML = testo;
</script>
</body>
</html>
Il file
persona.json:
{
"nome": "Giovanni",
"cognome": "Rossi",
"sesso": "maschio",
"vivente": true,
"età": 27,
"indirizzo": {
"via": "Buonarroti 18",
"comune": "Alpette",
"provincia": "TO",
"CAP": "10080"
},
"numeriTelefono": [
{
"tipo": "casa",
"numero": "0000000"
},
{
"tipo": "cellulare",
"numero": "111111111"
}
],
"titoli": [
"sig.",
"dott."
]
}
Sembra che il problema derivi da CORS policy:
Access to XMLHttpRequest at 'file:///C:/Users/...../source/repos/Libri/EserciziJavascript/Esercizi/15_json/persona.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
Come posso ovviare a tale problema ?