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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.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="/sas-tutorial/">Tutorial Sas</a> </li><li> <a href="/python-turtle-programming/">Programació De Tortugues Python</a> </li><li> <a href="/gmail-questions/">Preguntes De Gmail</a> </li><li> <a href="/min-heap/">Min-Munt</a> </li><li> <a href="/java-object-oriented/">Java Orientat A Objectes</a> </li><li> <a href="/ds-tutorial/">Tutorial Ds</a> </li><li> <a href="/numpy-tutorial/">Tutorial Numpy</a> </li><li> <a href="/powershell-tutorial/">Tutorial De Powershell</a> </li><li> <a href="/github/">Github</a> </li><li> <a href="/python-list/">Llista De Python</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="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Eliminació</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Supressió a l'arbre de cerca binària amb introducció, anàlisi asimptòtica, matriu, punter, estructura, llista enllaçada individualment, llista doblement enllaçada, llista enllaçada circular, cerca binària, cerca lineal, ordenació, classificació de cubs, classificació comb, classificació de Shell, ordenació en pila, fusió Ordenar, ordenar per selecció, ordenar per recompte, apilar, Qene, Quene circular, gràfic, arbre, arbre B, arbre B+, arbre Avl, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/deletion"> <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="/java-io-objectoutputstream-class-in-java-set-2">Classe Java.io.ObjectOutputStream en Java | Set 2</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/json-load-python">json.load() a Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-fix-module-not-found-error">Com solucionar l'error del mòdul no trobat?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/types-sql-join">Tipus de SQL JOIN</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/hashmap-keyset-method-java">HashMap keySet() Mètode a Java</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-jdbc-tutorial">jdbc</a>
</li><li><a href="/java-convert-int-string">com convertir un nombre enter en una cadena en java</a>
</li><li><a href="/how-insert-watermark-word">inseriu una marca d'aigua a Word</a>
</li><li><a href="/how-print-java">impressió java</a>
</li><li><a href="/javascript-if-else">declaració javascript if</a>
</li><li><a href="/javafx-tutorial">javafx</a>
</li><li><a href="/zeenat-aman">zeenat aman actor</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="//de.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>
<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>