JSON sta per Notazione oggetto JavaScript . È un modo di organizzare i dati in un file di script utilizzando il testo, semplificando l'archiviazione e la condivisione dei dati.
Lettura JSON i file, siano essi archiviati localmente o su un server, sono fondamentali per le applicazioni web. In questo tutorial tratteremo tre metodi per leggere i file JSON in JavaScript, che possono essere davvero utili per gli sviluppatori web.
Tabella dei contenuti
- Come leggere il file JSON in JavaScript?
- Utilizzo dell'API fetch() per leggere il file JSON
- Utilizzo del modulo Richiedi per leggere il file JSON
- Importando il modulo per leggere il file JSON
- Conclusione
NOTA: JavaScript supporta JSON internamente, quindi non richiede moduli aggiuntivi per importare e visualizzare JSON. Dobbiamo solo importare il file JSON e possiamo facilmente utilizzarlo direttamente per eseguire manipolazioni su di esso.
Come leggere il file JSON in JavaScript?
Tre metodi per leggere i file JSON in JavaScript sono:
Nota: Il file JSON seguente verrà utilizzato per recuperare i dati.
potatura alfa beta
campione.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] }>1. Utilizzo dell'API fetch() per leggere il file JSON
Il metodo fetch() viene utilizzato per leggere i file JSON (file locali o caricati). Utilizza la stessa sintassi per entrambi i tipi di file.
Sintassi
fetch('JSONFilePath').then().then().catch();>Segui questi passaggi per leggere il file JSON utilizzando il metodo API fetch:
- Crea un file JSON e aggiungivi dati
- Apri il file JavaScript
- Nel metodo fetch passa il percorso del file JSON
- Utilizza il metodo .json() per analizzare i dati in formato JSON.
- Visualizza il contenuto nella console.
Esempio di lettura del file JSON in JavaScript:
Il codice seguente ti aiuterà a comprendere l'uso del metodo fetch() per leggere i file JSON.
HTML Leggi il titolo del file JSON> head> <body> <h1>techcodeview.comh1><h3>Vai alla console per vedere i dati recuperati!! h3><script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { lancia nuovo errore (`Errore HTTP! Stato: ${res.status} `); } return res.json(); }) .then((dati) => console.log(dati)) .catch((errore) => console.error('Impossibile recuperare i dati:', errore)); } fetchJSONData(); script> corpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="visualizzazione console dei dati JSON dopo il recupero dell'API"></p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Utilizzo del modulo Richiedi per leggere il file JSON</strong> </b> </h2><p dir='ltr'> <span>Richiedi modulo</span> <span>viene utilizzato per includere moduli nell'applicazione. Può essere utilizzato per includere un file in un'applicazione web.</span></p> <h3><span>Sintassi:</span></h3><pre class='hljs'>require(JSONFilePath);></pre><p dir='ltr'><span>Segui questi passaggi per leggere i file JSON utilizzando il modulo richiesto in JavaScript.</span></p> <ul><li value='1'><span>Crea il file JSON come specificato nell'approccio precedente</span></li><li value='2'><span>Crea uno script.js e utilizza il metodo richiesto del nodo per importare il file JSON</span></li><li value='3'><span>Stampa i dati sulla console</span></li></ul><p dir='ltr'> <b> <strong>NOTA:</strong> </b> <span>Invece di eseguire il programma sul browser, lo eseguiremo sulla console utilizzando Node. Assicurati di avere almeno la versione 17.0 di Node.</span></p> <h3> <b> <strong>Esempio</strong> </b> </h3><p dir='ltr'><span>Il codice seguente può essere incollato direttamente in un file di script (il nodo deve essere installato) per eseguire e recuperare i dati JSON.</span></p>Javascript<code class='hljs'> <pre class='hljs'>const sample = require('./sample.json'); console.log(sample);></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <pre class='hljs'>{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] }></pre><h2 id='by-importing-the-module-to-read-json-file'> <b> <strong>3. Importando il modulo per leggere il file JSON</strong> </b> </h2><p dir='ltr'><span>IL</span> <span>dichiarazione di importazione</span> <span>può essere utilizzato per importare e archiviare elementi di file JSON in una variabile in JavaScript.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-listening-port">porta di ascolto</a>
</blockquote> <h3><span>Sintassi:</span></h3><pre class='hljs'>import nameOfVariable from 'JSONFilePath' assert {type: 'json'};></pre><ul><li value='1'><span>Crea il file JSON come descritto negli esempi precedenti.</span></li><li value='2'><span>Crea un file script.js e importa il file JSON</span></li></ul><h3> <b> <strong>Esempio di lettura del file JSON in JavaScript:</strong> </b> </h3><p dir='ltr'><span>Il codice seguente legge il file JSON importandolo utilizzando l'istruzione import.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content= 'width=device-width, initial-scale=1.0'> <title>Leggi il titolo del file JSON> head> <body> <h1>techcodeview.comh1><h3>Vai alla console per vedere i dati recuperati!! h3><script type='module' src='./script.js'>script> corpo> html>></pre> </code>Javascript<code class='hljs'> <pre class='hljs'>// script.js import user from './sample.json' assert { type: 'json' }; console.log(user)></pre> </code> <p dir='ltr'> <b> <strong>Produzione:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="vista console dei dati JSON utilizzando il modulo di importazione"></p> <h2 id='conclusion'><span>Conclusione</span></h2><p dir='ltr'><span>Leggere i file JSON in JavaScript è un compito molto importante per uno sviluppatore web poiché i file JSON vengono utilizzati per archiviare dati utente, dati di configurazione, dati statici e altre informazioni vitali.</span></p> <p dir='ltr'><span>Questa guida spiega tre metodi per leggere i file JSON in JavaScript con esempi. Comprendendo queste tecniche, gli sviluppatori possono affrontare con sicurezza le attività relative ai file JSON, garantendo processi di sviluppo più fluidi ed esperienze utente migliorate.</span></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/google-docs-tips/">Suggerimenti Per Google Documenti</a> </li><li> <a href="/mysql-tutorial/">Tutorial Su Mysql</a> </li><li> <a href="/c-input-output/">C-Ingresso-Uscita</a> </li><li> <a href="/law/">Legge</a> </li><li> <a href="/photoshop-tutorial/">Tutorial Di Photoshop</a> </li><li> <a href="/design-pattern/">Design Pattern</a> </li><li> <a href="/counter/">Contatore</a> </li><li> <a href="/hashtable/">Hashtable</a> </li><li> <a href="/cpp-inheritance/">Eredità-Cpp</a> </li><li> <a href="/atoms-ions/">Atomi E Ioni</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Atomo Pitone</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Atom Python con Python, tutorial, tkinter, pulsante, panoramica, voce, checkbutton, canvas, frame, configurazione dell'ambiente, primo programma Python, operatori, ecc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/atom-python"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articoli Interessanti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/introduction-min-heap-data-structure">Introduzione a Min-Heap: tutorial sulla struttura dei dati e sugli algoritmi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/functional-interfaces-java">Interfacce funzionali in Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-create-multicolored-text-web-page-using-html">Come creare testo multicolore in una pagina web utilizzando HTML e CSS?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/steps-write-execute-script">Passaggi per scrivere ed eseguire uno script</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/who-is-hasbulla-magomedov">Chi è Hasbulla Magomedov: età, altezza, patrimonio netto</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Messaggi Popolari</h2>
<div class="content">
<ul class="list"> <li><a href="/ubuntu-build-essential">Ubuntu costruire elementi essenziali</a>
</li><li><a href="/bash-concatenate-string">bash concatena le stringhe</a>
</li><li><a href="/how-sort-tuple-python">tupla ordinata in Python</a>
</li><li><a href="/java-convert-int-string">int per stringere java</a>
</li><li><a href="/arp-commands">pronunciare un comando</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Tutti I Diritti Riservati | <a href="//no.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>