JSON staat voor JavaScript-objectnotatie . Het is een manier om gegevens in een scriptbestand te ordenen met behulp van tekst, waardoor het gemakkelijk wordt om gegevens op te slaan en te delen.
Lezing JSON bestanden, of ze nu lokaal of op een server zijn opgeslagen, zijn cruciaal voor webapplicaties. In deze zelfstudie bespreken we drie methoden voor het lezen van JSON-bestanden in JavaScript, wat erg nuttig kan zijn voor webontwikkelaars.
Inhoudsopgave
- Hoe JSON-bestand in JavaScript lezen?
- De fetch() API gebruiken om het JSON-bestand te lezen
- De Require-module gebruiken om het JSON-bestand te lezen
- Door de module te importeren om het JSON-bestand te lezen
- Conclusie
OPMERKING: JavaScript ondersteunt JSON intern, dus er zijn geen extra modules nodig om de JSON te importeren en weer te geven. We hoeven alleen maar het JSON-bestand te importeren en kunnen het eenvoudig rechtstreeks gebruiken om er manipulaties op uit te voeren.
tekenreeks vergelijk Java
Hoe JSON-bestand in JavaScript lezen?
Drie methoden om JSON-bestanden in JavaScript te lezen zijn:
Opmerking: Het onderstaande JSON-bestand wordt gebruikt om de gegevens op te halen.
aparte tekenreeks in Java
voorbeeld.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] }>1. Gebruik de fetch() API om het JSON-bestand te lezen
De fetch() methode wordt gebruikt om JSON-bestanden (lokale of geüploade bestanden) te lezen. Het gebruikt dezelfde syntaxis voor beide bestandstypen.
Syntaxis
fetch('JSONFilePath').then().then().catch();>Volg deze stappen om het JSON-bestand te lezen met behulp van de fetch API-methode:
- Maak een JSON-bestand en voeg er gegevens aan toe
- Open het JavaScript-bestand
- Geef in de fetch-methode het pad van het JSON-bestand door
- Gebruik de methode .json() om de gegevens in JSON-indeling te parseren.
- Geef de inhoud in de console weer.
Voorbeeld van het lezen van een JSON-bestand in JavaScript:
De onderstaande code helpt u het gebruik van de fetch() -methode om JSON-bestanden te lezen te begrijpen.
HTML Lees JSON-bestandstitel> hoofd> <body> <h1>techcodeview.comh1><h3>Ga naar de console om de opgehaalde gegevens te bekijken!! h3><script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { throw new Error (`HTTP-fout! Status: ${res.status} `); } return res.json(); }) .then((data) => console.log(data)) .catch((fout) => console.error('Kan gegevens niet ophalen:', fout)); } fetchJSONData(); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="consoleweergave van JSON-gegevens na het ophalen van de API"></p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Gebruik de Require-module om het JSON-bestand te lezen</strong> </b> </h2><p dir='ltr'> <span>Vereist module</span> <span>wordt gebruikt om modules in uw applicatie op te nemen. Het kan worden gebruikt om een bestand op te nemen in een webapplicatie.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/collections-java">Java-collecties Java</a>
</blockquote> <h3><span>Syntaxis:</span></h3><pre class='hljs'>require(JSONFilePath);></pre><p dir='ltr'><span>Volg deze stappen om JSON-bestanden te lezen met behulp van de vereiste module in JavaScript.</span></p> <ul><li value='1'><span>Maak het JSON-bestand zoals opgegeven in de vorige aanpak</span></li><li value='2'><span>Maak een script.js en gebruik de vereiste methode van het knooppunt om het JSON-bestand te importeren</span></li><li value='3'><span>Druk de gegevens af op de console</span></li></ul><p dir='ltr'> <b> <strong>OPMERKING:</strong> </b> <span>In plaats van het programma in de browser uit te voeren, zullen we het op de console uitvoeren met behulp van Node. Zorg ervoor dat je minimaal Node-versie 17.0 hebt.</span></p> <h3> <b> <strong>Voorbeeld</strong> </b> </h3><p dir='ltr'><span>De onderstaande code kan rechtstreeks in een scriptbestand worden geplakt (het knooppunt moet zijn geïnstalleerd) om de JSON-gegevens uit te voeren en op te halen.</span></p>Javascript<code class='hljs'> <pre class='hljs'>const sample = require('./sample.json'); console.log(sample);></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</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. Door de module te importeren om het JSON-bestand te lezen</strong> </b> </h2><p dir='ltr'><span>De</span> <span>importverklaring</span> <span>kan worden gebruikt om JSON-bestandselementen te importeren en op te slaan in een variabele in JavaScript.</span></p> <h3><span>Syntaxis:</span></h3><pre class='hljs'>import nameOfVariable from 'JSONFilePath' assert {type: 'json'};></pre><ul><li value='1'><span>Maak het JSON-bestand zoals beschreven in de voorgaande voorbeelden.</span></li><li value='2'><span>Maak een script.js-bestand en importeer het JSON-bestand</span></li></ul><h3> <b> <strong>Voorbeeld van het lezen van een JSON-bestand in JavaScript:</strong> </b> </h3><p dir='ltr'><span>De onderstaande code leest het JSON-bestand door het te importeren met behulp van de importinstructie.</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>Lees JSON-bestandstitel> hoofd> <body> <h1>techcodeview.comh1><h3>Ga naar de console om de opgehaalde gegevens te bekijken!! 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>Uitgang:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-scanner">scanner-java importeren</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="consoleweergave van JSON-gegevens met behulp van de importmodule"></p> <h2 id='conclusion'><span>Conclusie</span></h2><p dir='ltr'><span>Het lezen van JSON-bestanden in JavaScript is een zeer belangrijke taak voor een webontwikkelaar, omdat JSON-bestanden worden gebruikt om gebruikersgegevens, configuratiegegevens, statische gegevens en andere essentiële informatie op te slaan.</span></p> <p dir='ltr'><span>In deze handleiding worden drie methoden uitgelegd om JSON-bestanden in JavaScript te lezen met voorbeelden. Door deze technieken te begrijpen, kunnen ontwikkelaars met vertrouwen JSON-bestandsgerelateerde taken uitvoeren, waardoor soepelere ontwikkelingsprocessen en verbeterde gebruikerservaringen worden gegarandeerd.</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/chemistry-difference-between/">Chemie-Verschil-Tussen</a> </li><li> <a href="/product-management-qna/">Productbeheer Qna</a> </li><li> <a href="/c-loops-control-statements/">C-Lussen En Controleverklaringen</a> </li><li> <a href="/cpp-iterator/">Cpp-Iterator</a> </li><li> <a href="/javascript-lodash/">Javascript-Lodash</a> </li><li> <a href="/mysql/">Mysql</a> </li><li> <a href="/divide-and-conquer/">Verdeel en heers</a> </li><li> <a href="/history-gk/">Geschiedenis Gk</a> </li><li> <a href="/java-exceptions/">Java-Uitzonderingen</a> </li><li> <a href="/physics-difference-between/">Natuurkunde-Verschil-Tussen</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">Voor- en nadelen van online winkelen</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Voor- en nadelen van online winkelen met blog, wat is quora, wat is yandex, contactpagina, duckduckgo-zoekmachine, zoekmachinejournaal, Facebook, Google Chrome, Firefox enz.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/advantages-disadvantages-online-shopping"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/modem-vs-router-difference-between-modem">Modem versus router | Verschil tussen modem en router</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-inner-classes">Java-innerlijke klassen (geneste klassen)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/5-fundamental-sagittarius-traits-you-need-know-131326">De 5 fundamentele eigenschappen van Boogschutter die u moet kennen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-separate-first">Hoe voor- en achternaam scheiden in Excel? 4 eenvoudige methoden</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/150-happy-christmas-wishes-2023">150 gelukkige kerstwensen 2023: afbeelding, citaten, bericht</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/what-is-full-form-pvr">pvr volledige vorm</a>
</li><li><a href="/c-string-find">tekenreeks zoek c++</a>
</li><li><a href="/jsp-tutorial">jsp</a>
</li><li><a href="/how-find-out-my-monitor-size">mijn monitorformaat</a>
</li><li><a href="/what-is-10-6th-power">10 macht van 6</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 Alle Rechten Voorbehouden | <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>