JSON tarkoittaa JavaScript-objektin merkintä . Se on tapa järjestää tietoja komentosarjatiedostoon tekstin avulla, mikä tekee tietojen tallentamisesta ja jakamisesta helppoa.
Lukeminen JSON tiedostot, olivatpa ne tallennettuna paikallisesti tai palvelimelle, ovat tärkeitä verkkosovelluksille. Tässä opetusohjelmassa käsittelemme kolmea tapaa lukea JSON-tiedostoja JavaScriptissä, jotka voivat olla todella hyödyllisiä verkkokehittäjille.
Sisällysluettelo
- Kuinka lukea JSON-tiedosto JavaScriptissä?
- Fetch() API:n käyttäminen JSON-tiedoston lukemiseen
- Require Module -sovelluksen käyttäminen JSON-tiedoston lukemiseen
- Tuomalla moduulin JSON-tiedoston lukemiseen
- Johtopäätös
HUOMAUTUS: JavaScript tukee JSONia sisäisesti, joten se ei vaadi lisämoduuleja JSONin tuomiseen ja näyttämiseen. Meidän on vain tuotava JSON-tiedosto ja voimme käyttää sitä helposti suoraan sen käsittelyyn.
Kuinka lukea JSON-tiedosto JavaScriptissä?
Kolme tapaa lukea JSON-tiedostoja JavaScriptissä ovat:
Huomautus: Alla olevaa JSON-tiedostoa käytetään tietojen hakemiseen.
sample.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] }>1. JSON-tiedoston lukeminen fetch()-sovellusliittymän avulla
Fetch()-menetelmää käytetään JSON-tiedostojen (paikallisten tai ladattujen tiedostojen) lukemiseen. Se käyttää samaa syntaksia molemmille tiedostotyypeille.
Syntaksi
fetch('JSONFilePath').then().then().catch();>Noudata näitä ohjeita lukeaksesi JSON-tiedoston fetch API -menetelmällä:
- Luo JSON-tiedosto ja lisää siihen tietoja
- Avaa JavaScript-tiedosto
- Siirrä hakumenetelmässä JSON-tiedoston polku
- Käytä .json()-menetelmää tietojen jäsentämiseen JSON-muodossa.
- Näytä sisältö konsolissa.
Esimerkki JSON-tiedoston lukemisesta JavaScriptissä:
Alla oleva koodi auttaa sinua ymmärtämään fetch()-menetelmän käytön JSON-tiedostojen lukemiseen.
HTML Lue JSON-tiedostootsikko> head> <body> <h1>techcodeview.comh1><h3>Siirry konsoliin nähdäksesi haetut tiedot!! h3><script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { heittää uusi virhe (`HTTP-virhe! Tila: ${res.status} `); } return res.json(); virhe)); } fetchJSONData(); script> body> html>>></tag> <p dir='ltr'> <b> <strong>Lähtö:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="JSON-tietojen konsolinäkymä haun API:n jälkeen"></p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Require Module -toiminnon käyttäminen JSON-tiedoston lukemiseen</strong> </b> </h2><p dir='ltr'> <span>Vaadi moduuli</span> <span>käytetään moduulien sisällyttämiseen sovellukseesi. Sitä voidaan käyttää tiedoston sisällyttämiseen verkkosovellukseen.</span></p> <h3><span>Syntaksi:</span></h3><pre class='hljs'>require(JSONFilePath);></pre> </code><p dir='ltr'><span>Noudata näitä ohjeita lukeaksesi JSON-tiedostoja käyttämällä vaadittua JavaScript-moduulia.</span></p> <ul><li value='1'><span>Luo JSON-tiedosto edellisen lähestymistavan mukaisesti</span></li><li value='2'><span>Luo script.js ja tuo JSON-tiedosto vaaditulla solmun menetelmällä</span></li><li value='3'><span>Tulosta tiedot konsoliin</span></li></ul><p dir='ltr'> <b> <strong>HUOMAUTUS:</strong> </b> <span>Sen sijaan, että suorittaisit ohjelman selaimessa, suoritamme sen konsolissa Noden avulla. Varmista, että sinulla on vähintään Node-versio 17.0.</span></p> <h3> <b> <strong>Esimerkki</strong> </b> </h3><p dir='ltr'><span>Alla oleva koodi voidaan liittää suoraan komentosarjatiedostoon (solmu on asennettava) JSON-tietojen suorittamiseksi ja hakemiseksi.</span></p>Javascript<code class='hljs'> <pre class='hljs'>const sample = require('./sample.json'); console.log(sample);></pre> </code> <p dir='ltr'> <b> <strong>Lähtö:</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. Tuomalla moduulin JSON-tiedoston lukemiseen</strong> </b> </h2><p dir='ltr'><span>The</span> <span>tuontilausunto</span> <span>voidaan käyttää JSON-tiedostoelementtien tuomiseen ja tallentamiseen JavaScriptin muuttujaan.</span></p> <h3><span>Syntaksi:</span></h3><pre class='hljs'>import nameOfVariable from 'JSONFilePath' assert {type: 'json'};></pre><ul><li value='1'><span>Luo JSON-tiedosto aiemmissa esimerkeissä kuvatulla tavalla.</span></li><li value='2'><span>Luo script.js-tiedosto ja tuo JSON-tiedosto</span></li></ul><h3> <b> <strong>Esimerkki JSON-tiedoston lukemisesta JavaScriptissä:</strong> </b> </h3><p dir='ltr'><span>Alla oleva koodi Lukee JSON-tiedoston tuomalla sen tuontikäskyn avulla.</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>Lue JSON-tiedostootsikko> head> <body> <h1>techcodeview.comh1><h3>Siirry konsoliin nähdäksesi haetut tiedot!! 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>Lähtö:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="JSON-tietojen konsolinäkymä tuontimoduulin avulla"></p> <h2 id='conclusion'><span>Johtopäätös</span></h2><p dir='ltr'><span>JSON-tiedostojen lukeminen JavaScriptissä on erittäin tärkeä tehtävä verkkokehittäjälle, koska JSON-tiedostoja käytetään käyttäjätietojen, määritystietojen, staattisten tietojen ja muiden tärkeiden tietojen tallentamiseen.</span></p> <p dir='ltr'><span>Tässä oppaassa selitettiin esimerkkien avulla kolme tapaa lukea JSON-tiedostoja JavaScriptissä. Ymmärtämällä nämä tekniikat kehittäjät voivat selviytyä luottavaisesti JSON-tiedostoihin liittyvistä tehtävistä, mikä varmistaa sujuvammat kehitysprosessit ja paremman käyttökokemuksen.</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="">Luokka</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/maths-class-10-cat/">Matematiikka-Luokka-10</a> </li><li> <a href="/java-list-methods/">Java-Luettelomenetelmät</a> </li><li> <a href="/arithmetic-maq/">Aritmetiikka - Maq</a> </li><li> <a href="/history-gk/">Historia Gk</a> </li><li> <a href="/java-array-programs/">Java-Array-Ohjelmat</a> </li><li> <a href="/c-language/">C -kieli</a> </li><li> <a href="/english-difference-between/">Englanti-Ero-Välillä</a> </li><li> <a href="/http-response-status-codes/">Http- Vastaus-Tilakoodit</a> </li><li> <a href="/linux-tutorial/">Linux Opetusohjelma</a> </li><li> <a href="/python-array/">Python-Taulukko</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">Tietojen indeksointi ja valitseminen pandoilla</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Tietojenkäsittelytieteen portaali nörteille. Se sisältää hyvin kirjoitettuja, hyvin ajateltuja ja hyvin selitettyjä tietojenkäsittelytieteen ja ohjelmoinnin artikkeleita, tietokilpailuja ja harjoitus-/kilpailuohjelmointi-/yrityshaastattelukysymyksiä.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/indexing-selecting-data-with-pandas"> <i class="fa fa-external-link"></i> Lue Lisää</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Mielenkiintoisia Artikkeleita</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/default-arguments-python">Oletusargumentit Pythonissa</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/dsa/">DSA</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-many-hours-is-90-minutes">Kuinka monta tuntia on 90 minuuttia?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-most-popular-sports-world">Top 10 suosituinta urheilua maailmassa [sijoitettu]</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/default-array-values-in-java">Oletusaryhmäarvot 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">Suosittu Viestiä</h2>
<div class="content">
<ul class="list"> <li><a href="/b-tree">b+ puita</a>
</li><li><a href="/how-sort-list-java">listan lajittelu java</a>
</li><li><a href="/latex-table">taulukoiden luominen lateksista</a>
</li><li><a href="/java-convert-int-string">muuntaa javassa merkkijonoksi</a>
</li><li><a href="/difference-between-row">rivi vs sarake</a>
</li><li><a href="/java-string-contains">merkkijono sisältää javan</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 Kaikki Oikeudet Pidätetään | <a href="//lt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö</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>