JSON reiškia „JavaScript“ objektų žymėjimas . Tai būdas tvarkyti duomenis scenarijaus faile naudojant tekstą, kad būtų lengva saugoti ir bendrinti duomenis.
Skaitymas JSON failai, nesvarbu, ar jie saugomi vietoje, ar serveryje, yra labai svarbūs žiniatinklio programoms. Šiame vadove apžvelgsime tris JSON failų skaitymo „JavaScript“ būdus, kurie gali būti tikrai naudingi žiniatinklio kūrėjams.
Turinys
- Kaip skaityti JSON failą „JavaScript“?
- Naudojant fetch() API JSON failui skaityti
- Reikalavimo modulio naudojimas JSON failui skaityti
- Importuodami modulį, kad galėtumėte skaityti JSON failą
- Išvada
PASTABA: „JavaScript“ palaiko JSON viduje, todėl norint importuoti ir rodyti JSON nereikia papildomų modulių. Mes tiesiog turime importuoti JSON failą ir galime lengvai jį naudoti tiesiogiai manipuliavimui atlikti.
java char į int
Kaip skaityti JSON failą „JavaScript“?
Trys būdai, kaip skaityti JSON failus JavaScript:
Pastaba: Toliau pateiktas JSON failas bus naudojamas duomenims gauti.
nelygu mysql
sample.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] }>1. Naudokite fetch() API JSON failui skaityti
Metodas „fetch()“ naudojamas JSON failams (vietiniams arba įkeltiems) skaityti. Abiejų tipų failams naudojama ta pati sintaksė.
Sintaksė
fetch('JSONFilePath').then().then().catch();>Atlikite šiuos veiksmus, kad perskaitytumėte JSON failą naudodami gavimo API metodą:
- Sukurkite JSON failą ir pridėkite prie jo duomenų
- Atidarykite JavaScript failą
- Naudodami gavimo metodą, nurodykite JSON failo kelią
- Norėdami išanalizuoti duomenis JSON formatu, naudokite metodą .json().
- Rodyti turinį konsolėje.
„JavaScript“ JSON failo skaitymo pavyzdys:
Toliau pateiktas kodas padės suprasti, kaip naudoti fetch() metodą JSON failams skaityti.
HTML Skaitykite JSON failo pavadinimą> head> <body> <h1>techcodeview.comh1><h3>Eikite į konsolę, kad pamatytumėte gautus duomenis!! h3><script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { throw new Error (`HTTP klaida! Būsena: ${res.status} `); } return res.json(); klaida)); } fetchJSONData(); script> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="JSON duomenų konsolės rodinys po gavimo API"></p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Reikalavimo modulio naudojimas JSON failui skaityti</strong> </b> </h2><p dir='ltr'> <span>Reikalingas modulis</span> <span>naudojamas moduliams įtraukti į jūsų programą. Jis gali būti naudojamas norint įtraukti failą į žiniatinklio programą.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-iterate-map-java">java iterate žemėlapis</a>
</blockquote> <h3><span>Sintaksė:</span></h3><pre class='hljs'>require(JSONFilePath);></pre> </code><p dir='ltr'><span>Atlikite šiuos veiksmus, kad skaitytumėte JSON failus naudodami reikiamą „JavaScript“ modulį.</span></p> <ul><li value='1'><span>Sukurkite JSON failą, kaip nurodyta ankstesniame metode</span></li><li value='2'><span>Sukurkite script.js ir naudokite reikiamą mazgo metodą, kad importuotumėte JSON failą</span></li><li value='3'><span>Išspausdinkite duomenis konsolėje</span></li></ul><p dir='ltr'> <b> <strong>PASTABA:</strong> </b> <span>Užuot paleidę programą naršyklėje, paleisime ją konsolėje naudodami „Node“. Įsitikinkite, kad turite bent 17.0 Node versiją.</span></p> <h3> <b> <strong>Pavyzdys</strong> </b> </h3><p dir='ltr'><span>Toliau pateiktą kodą galima tiesiogiai įklijuoti į scenarijaus failą (mazgas turi būti įdiegtas), kad būtų vykdomi ir gaunami JSON duomenys.</span></p>Javascript<code class='hljs'> <pre class='hljs'>const sample = require('./sample.json'); console.log(sample);></pre> </code> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <tag data-text-3='{ users: [ { site: 'GeeksForGeeks', user: 'Shobhit' } ] }></pre><h2 id='by-importing-the-module-to-read-json-file'> <b> <strong>3. Importuodami JSON failo skaitymo modulį</strong> </b> </h2><p dir='ltr'><span>The</span> <span>importo pareiškimas</span> <span>gali būti naudojamas importuoti ir saugoti JSON failo elementus į „JavaScript“ kintamąjį.</span></p> <h3><span>Sintaksė:</span></h3><pre class='hljs'>import nameOfVariable from 'JSONFilePath' assert {type: 'json'};></pre><ul><li value='1'><span>Sukurkite JSON failą, kaip aprašyta ankstesniuose pavyzdžiuose.</span></li><li value='2'><span>Sukurkite script.js failą ir importuokite JSON failą</span></li></ul><h3> <b> <strong>„JavaScript“ JSON failo skaitymo pavyzdys:</strong> </b> </h3><p dir='ltr'><span>Toliau pateiktas kodas nuskaito JSON failą, importuodamas jį naudodami importavimo teiginį.</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>Skaitykite JSON failo pavadinimą> head> <body> <h1>techcodeview.comh1><h3>Eikite į konsolę, kad pamatytumėte gautus duomenis!! h3><script type='module' src='./script.js'>script> body> html>>></tag>Javascript<tag data-text-1='// script.js import user from './sample.json' assert { type: 'json' }; console.log(user)></pre> </code> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/binary-search-algorithm">dvejetainis paieškos algoritmas</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="JSON duomenų konsolės rodinys naudojant importavimo modulį"></p> <h2 id='conclusion'><span>Išvada</span></h2><p dir='ltr'><span>JSON failų skaitymas JavaScript yra labai svarbi žiniatinklio kūrėjo užduotis, nes JSON failai naudojami vartotojo duomenims, konfigūracijos duomenims, statiniams duomenims ir kitai svarbiai informacijai saugoti.</span></p> <p dir='ltr'><span>Šiame vadove buvo paaiškinti trys būdai, kaip skaityti JSON failus „JavaScript“ su pavyzdžiais. Suprasdami šiuos metodus, kūrėjai gali užtikrintai spręsti su JSON failais susijusias užduotis, užtikrindami sklandesnius kūrimo procesus ir geresnę vartotojo patirtį.</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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/microprocessor-tutorial/">Mikroprocesoriaus Pamoka</a> </li><li> <a href="/image-tools/">Vaizdo Įrankiai</a> </li><li> <a href="/big-endian/">Didysis Endianas</a> </li><li> <a href="/csharp-operators/">„Csharp“ Operatoriai</a> </li><li> <a href="/c-conversion-programs/">C Konversijos Programos</a> </li><li> <a href="/data-link-layer/">Duomenų Nuorodos Sluoksnis</a> </li><li> <a href="/pwa-tutorial/">Pwa Pamoka</a> </li><li> <a href="/linux-networking/">Linux Tinklas</a> </li><li> <a href="/animal-physiology/">Gyvūnų Fiziologija</a> </li><li> <a href="/javascript-questions/">„Javascript“ – Klausimai</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">Java Sąrašo Metodai</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java Sąrašo Metodai</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-list-methods/"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-install-mysql">Kaip įdiegti MySQL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-are-college-prep-courses-131564">Kas yra kolegijos parengiamieji kursai ir pamokos?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/string-int-python">Eilutė į int Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/chemistry/">Chemija</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-drivermanager/">„Java Drivermanager“.</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/java-gridlayout">tinklelio išdėstymas</a>
</li><li><a href="/statement-coverage-testing">pareiškimo aprėptis</a>
</li><li><a href="/rename-folder-linux">pervardykite katalogą linux</a>
</li><li><a href="/spring-boot-jpa">jpa pavasarį</a>
</li><li><a href="/string-concatenation-java">java concat eilutė</a>
</li><li><a href="/ridhima-tiwari">ridhima tiwari</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 Visos Teisės Saugomos | <a href="//sv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</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>