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><!--//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="/geometry-maq/">Geometrija - Maq</a> </li><li> <a href="/maven-tutorial/">Maven Pamoka</a> </li><li> <a href="/english-blogs/">Anglų Dienoraščiai</a> </li><li> <a href="/c/">C ++</a> </li><li> <a href="/pc-tips/">Pc Patarimai</a> </li><li> <a href="/python-dict/">Python-Diktas</a> </li><li> <a href="/complexity-analysis/">Sudėtingumo Analizė</a> </li><li> <a href="/python-searching-exercises/">Python Paieškos Pratimai</a> </li><li> <a href="/graph-theory-tutorial/">Grafų Teorijos Pamoka</a> </li><li> <a href="/hadoop-tutorial/">Hadoop Pamoka</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Algoritmų pamoka</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/algorithms-tutorial"> <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="/pl-sql-loop">PL/SQL FOR ciklas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/where-get-cashier-s-check-131426">Kur (ir kaip) gauti kasos čekį: 8 paprasti veiksmai</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/when-apply-college-1311254">Kada kreiptis į koledžą: pilna laiko juosta</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linked-list/">Susietas sąrašas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-are-icd-10-codes-131846">Kokie yra TLK-10 pilvo skausmo kodai? Pilnas sąrašas</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-convert-long-int">ilgai int java</a>
</li><li><a href="/shreya-ghoshal">shreya ghoshal</a>
</li><li><a href="/bash-find">bash stygos ilgis</a>
</li><li><a href="/sridevi">Sridevi</a>
</li><li><a href="/javascript-string-trim">javascript trim poeilutė</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="//sk.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>