JSON significa Notació d'objectes JavaScript . És una manera d'organitzar les dades en un fitxer de script mitjançant text, de manera que és fàcil emmagatzemar i compartir dades.
Lectura JSON Els fitxers, tant si s'emmagatzemen localment com en un servidor, són crucials per a les aplicacions web. En aquest tutorial, tractarem tres mètodes per llegir fitxers JSON en JavaScript, que poden ser molt útils per als desenvolupadors web.
Taula de contingut
- Com llegir el fitxer JSON a JavaScript?
- Utilitzant l'API fetch() per llegir el fitxer JSON
- Utilitzant el mòdul Require per llegir el fitxer JSON
- En importar el mòdul per llegir el fitxer JSON
- Conclusió
NOTA: JavaScript admet JSON internament, de manera que no requereix mòduls addicionals per importar i mostrar el JSON. Només hem d'importar el fitxer JSON i el podem utilitzar directament directament per realitzar manipulacions sobre ell.
Com llegir el fitxer JSON a JavaScript?
Tres mètodes per llegir fitxers JSON en JavaScript són:
Nota: El fitxer JSON següent s'utilitzarà per obtenir les dades.
sample.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] }>1. Ús de l'API fetch() per llegir el fitxer JSON
El mètode fetch() s'utilitza per llegir fitxers JSON (fitxers locals o carregats). Utilitza la mateixa sintaxi per als dos tipus de fitxer.
Sintaxi
fetch('JSONFilePath').then().then().catch();>Seguiu aquests passos per llegir el fitxer JSON mitjançant el mètode fetch API:
- Creeu un fitxer JSON i afegiu-hi dades
- Obriu el fitxer JavaScript
- En el mètode fetch, passeu la ruta del fitxer JSON
- Utilitzeu el mètode .json() per analitzar les dades en format JSON.
- Mostra el contingut a la consola.
Exemple de lectura del fitxer JSON en JavaScript:
El codi següent us ajudarà a entendre l'ús del mètode fetch() per llegir fitxers JSON.
HTML Llegiu Títol del fitxer JSON> cap> <body> <h1>techcodeview.comh1><h3>Aneu a la consola per veure les dades obtingudes!! h3><script>funció fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { throw new Error (`error HTTP! Estat: ${res.status} `); } retorna res.json(); error)); } fetchJSONData(); script> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="visualització de la consola de les dades JSON després d'obtenir l'API"></p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Utilitzant el mòdul Require per llegir el fitxer JSON</strong> </b> </h2><p dir='ltr'> <span>Requereix mòdul</span> <span>s'utilitza per incloure mòduls a la vostra aplicació. Es pot utilitzar per incloure un fitxer en una aplicació web.</span></p> <h3><span>Sintaxi:</span></h3><pre class='hljs'>require(JSONFilePath);></pre><p dir='ltr'><span>Seguiu aquests passos per llegir fitxers JSON mitjançant el mòdul necessari a JavaScript.</span></p> <ul><li value='1'><span>Creeu el fitxer JSON tal com s'especifica a l'enfocament anterior</span></li><li value='2'><span>Creeu un script.js i utilitzeu el mètode necessari del node per importar el fitxer JSON</span></li><li value='3'><span>Imprimeix les dades a la consola</span></li></ul><p dir='ltr'> <b> <strong>NOTA:</strong> </b> <span>En lloc d'executar el programa al navegador, l'executarem a la consola mitjançant Node. Assegureu-vos que teniu almenys la versió 17.0 de Node.</span></p> <h3> <b> <strong>Exemple</strong> </b> </h3><p dir='ltr'><span>El codi següent es pot enganxar directament en un fitxer d'script (el node s'ha d'instal·lar) per executar i obtenir les dades 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>Sortida:</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. En importar el mòdul per llegir el fitxer JSON</strong> </b> </h2><p dir='ltr'><span>El</span> <span>declaració d'importació</span> <span>es pot utilitzar per importar i emmagatzemar elements del fitxer JSON en una variable en JavaScript.</span></p> <h3><span>Sintaxi:</span></h3><pre class='hljs'>import nameOfVariable from 'JSONFilePath' assert {type: 'json'};></pre><ul><li value='1'><span>Creeu el fitxer JSON tal com es descriu als exemples anteriors.</span></li><li value='2'><span>Creeu un fitxer script.js i importeu el fitxer JSON</span></li></ul><h3> <b> <strong>Exemple de lectura de fitxers JSON en JavaScript:</strong> </b> </h3><p dir='ltr'><span>El codi següent Llegeix el fitxer JSON important-lo mitjançant la instrucció d'importació.</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>Llegiu Títol del fitxer JSON> cap> <body> <h1>techcodeview.comh1><h3>Aneu a la consola per veure les dades obtingudes!! h3><script type='module' src='./script.js'>script> body> 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>Sortida:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="vista de la consola de dades JSON mitjançant el mòdul d'importació"></p> <h2 id='conclusion'><span>Conclusió</span></h2><p dir='ltr'><span>La lectura de fitxers JSON a JavaScript és una tasca molt important per a un desenvolupador web, ja que els fitxers JSON s'utilitzen per emmagatzemar dades d'usuari, dades de configuració, dades estàtiques i altra informació vital.</span></p> <p dir='ltr'><span>Aquesta guia va explicar tres mètodes per llegir fitxers JSON en JavaScript amb exemples. En entendre aquestes tècniques, els desenvolupadors poden abordar amb confiança les tasques relacionades amb fitxers JSON, garantint processos de desenvolupament més fluids i experiències d'usuari millorades.</span></p> <br> <br></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="/http-headers/">Capçaleres Http</a> </li><li> <a href="/nginx-tutorial/">Tutorial Nginx</a> </li><li> <a href="/roman-numerals/">Números Romans</a> </li><li> <a href="/arduino-tutorial/">Tutorial Arduino</a> </li><li> <a href="/python-numpy-linear-algebra/">Python Numpy-Àlgebra Lineal</a> </li><li> <a href="/physics-questions/">Física-Preguntes</a> </li><li> <a href="/dijkstra/">Dijkstra</a> </li><li> <a href="/excel-functions/">Excel-Funcions</a> </li><li> <a href="/python-string/">Cadena-Python</a> </li><li> <a href="/mockito-tutorial/">Tutorial De Mockito</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Una matriu de cadenes en C</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Una matriu de cadenes en C amb tutorial, llenguatge C amb exemples de programació per a principiants i professionals que cobreixen conceptes, punters c, estructures c, unió c, cadenes c, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/an-array-strings-c"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/5-best-homework-help-websites-free-131422">Els 5 millors llocs web d'ajuda per a deures (gratis i de pagament!)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-remove-unused-icons-from-windows-desktop">Com eliminar les icones no utilitzades de l'escriptori de Windows?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-right-click">Què és el clic dret?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ethos-pathos-logos-1311266">Ethos, Pathos, Logos, Kairos: els modes de persuasió i com utilitzar-los</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-find-shortest-paths-from-source-all-vertices-using-dijkstra-s-algorithm">Com trobar els camins més curts des de la font fins a tots els vèrtexs mitjançant l'algoritme de Dijkstra</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">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/java-naming-convention">convencions de denominació de Java</a>
</li><li><a href="/java-tutorial">tutorials de java</a>
</li><li><a href="/svn-checkout">què és svn checkout</a>
</li><li><a href="/how-sort-tuple-python">tupla python ordenada</a>
</li><li><a href="/uses-operating-system">usos del sistema operatiu</a>
</li><li><a href="/how-split-strings-c">cadena dividida en c++</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 Tots Els Drets Reservats | <a href="//sv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>
</body>
</html>