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="/html-tutorial/">Tutorial Html</a> </li><li> <a href="/how/">Com</a> </li><li> <a href="/bash-tutorial/">Bash Tutorial</a> </li><li> <a href="/hadoop-tutorial/">Tutorial Hadoop</a> </li><li> <a href="/html-attributes/">Html-Atributs</a> </li><li> <a href="/excel-advanced/">Excel - Avançat</a> </li><li> <a href="/android-tips-tricks/">Trucs Per Android Consells</a> </li><li> <a href="/robotics-tutorial/">Tutorial De Robòtica</a> </li><li> <a href="/backend-development/">Backend-Desenvolupament</a> </li><li> <a href="/reactjs-tutorial/">Tutorial De Reactjs</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">UC vs CSU: quina és la diferència? Quin és millor?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Quina diferència hi ha entre UC i CSU? La nostra guia completa de Cal State vs. University of California us ajuda a determinar la millor escola per a vosaltres.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/uc-vs-csu-what-s-difference-131626"> <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="/why-does-my-computer-power">Per què el meu ordinador s'encén i després s'apaga immediatament?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/vector-class-java">Classe vectorial en Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/food-web-definition">Web alimentària: definició, diagrama, cadena alimentària i exemples</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/3-way-merge-sort-c">Ordenació de fusió de 3 vies en c</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sql-server-substring-function">Funció SQL Server SUBSTRING().</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="/how-read-csv-file-java">lectura de fitxers csv en java</a>
</li><li><a href="/difference-between-hashset">hashset vs hashmap</a>
</li><li><a href="/random-function-c">c nombre aleatori</a>
</li><li><a href="/java-string-compare">compara cadenes java</a>
</li><li><a href="/linux-which-command">linux quin comanda</a>
</li><li><a href="/java-convert-string-int">convertir cadena en enter</a>
</li><li><a href="/latex-partial-derivative">derivada parcial en làtex</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="//es.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>