JSON står för JavaScript-objektnotation . Det är ett sätt att organisera data i en skriptfil med hjälp av text, vilket gör det enkelt att lagra och dela data.
Läsning JSON filer, oavsett om de lagras lokalt eller på en server, är avgörande för webbapplikationer. I den här handledningen kommer vi att täcka tre metoder för att läsa JSON-filer i JavaScript, vilket kan vara väldigt användbart för webbutvecklare.
Innehållsförteckning
- Hur läser jag JSON-fil i JavaScript?
- Använda fetch() API för att läsa JSON-fil
- Använda Require Module för att läsa JSON-fil
- Genom att importera modulen för att läsa JSON-filen
- Slutsats
NOTERA: JavaScript stöder JSON internt så det kräver inga ytterligare moduler för att importera och visa JSON. Vi behöver bara importera JSON-filen och kan enkelt använda den direkt för att utföra manipulationer på den.
låsa en Android-app
Hur läser jag JSON-fil i JavaScript?
Tre metoder för att läsa JSON-filer i JavaScript är:
Notera: JSON-filen nedan kommer att användas för att hämta data.
vad betyder detta xd
sample.json
{ 'users':[ { 'site':'techcodeview.com', 'user': 'Shobhit' } ] }>1. Använda fetch() API för att läsa JSON-fil
Metoden fetch() används för att läsa JSON-filer (lokala eller uppladdade filer). Den använder samma syntax för båda filtyperna.
Syntax
fetch('JSONFilePath').then().then().catch();>Följ dessa steg för att läsa JSON-filen med metoden hämta API:
- Skapa en JSON-fil och lägg till data till den
- Öppna JavaScript-filen
- I hämtningsmetoden skickar du sökvägen till JSON-filen
- Använd metoden .json() för att analysera data i JSON-format.
- Visa innehållet i konsolen.
Exempel på att läsa JSON-fil i JavaScript:
Koden nedan hjälper dig att förstå användningen av metoden fetch() för att läsa JSON-filer.
HTML Läs JSON Filetitle> head> <body> <h1>techcodeview.comh1><h3>Gå till konsolen för att se hämtad data!! h3><script>function fetchJSONData() { fetch('./sample.json') .then((res) => { if (!res.ok) { throw new Error (`HTTP-fel! Status: ${res.status} `); } return res.json(); }) .then((data) => console.log(data)) .catch((error) => console.error('Kan inte hämta data:', fel)); } fetchJSONData(); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="konsolvy av JSON-data efter hämtning av API"></p> <h2 id='using-the-require-module-to-read-json-file'> <b> <strong>2. Använda Require Module för att läsa JSON-filen</strong> </b> </h2><p dir='ltr'> <span>Kräver modul</span> <span>används för att inkludera moduler i din applikation. Den kan användas för att inkludera en fil i en webbapplikation.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-10-40">10 av 40</a>
</blockquote> <h3><span>Syntax:</span></h3><pre class='hljs'>require(JSONFilePath);></pre><p dir='ltr'><span>Följ dessa steg för att läsa JSON-filer med den obligatoriska modulen i JavaScript.</span></p> <ul><li value='1'><span>Skapa JSON-filen enligt den tidigare metoden</span></li><li value='2'><span>Skapa ett script.js och använd den metod som krävs för noden för att importera JSON-filen</span></li><li value='3'><span>Skriv ut data på konsolen</span></li></ul><p dir='ltr'> <b> <strong>NOTERA:</strong> </b> <span>Istället för att köra programmet på webbläsaren kör vi det på konsolen med hjälp av Node. Se till att du har minst Node version 17.0.</span></p> <h3> <b> <strong>Exempel</strong> </b> </h3><p dir='ltr'><span>Nedanstående kod kan klistras in direkt i en skriptfil (noden måste vara installerad) för att exekvera och hämta JSON-data.</span></p>Javascript<code class='hljs'> <pre class='hljs'>const sample = require('./sample.json'); console.log(sample);></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</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. Genom att importera modulen för att läsa JSON-filen</strong> </b> </h2><p dir='ltr'><span>De</span> <span>importförklaring</span> <span>kan användas för att importera och lagra JSON-filelement i en variabel i JavaScript.</span></p> <h3><span>Syntax:</span></h3><pre class='hljs'>import nameOfVariable from 'JSONFilePath' assert {type: 'json'};></pre><ul><li value='1'><span>Skapa JSON-filen enligt beskrivningen i de tidigare exemplen.</span></li><li value='2'><span>Skapa en script.js-fil och importera JSON-filen</span></li></ul><h3> <b> <strong>Exempel på att läsa JSON-fil i JavaScript:</strong> </b> </h3><p dir='ltr'><span>Nedanstående kod Läser JSON-filen genom att importera den med importsatsen.</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>Läs JSON Filetitle> head> <body> <h1>techcodeview.comh1><h3>Gå till konsolen för att se hämtad data!! 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>Produktion:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-jdbc-tutorial">java-anslutning</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-questions/49/read-json-file-using-javascript.webp' alt="konsolvy av JSON-data med hjälp av importmodul"></p> <h2 id='conclusion'><span>Slutsats</span></h2><p dir='ltr'><span>Att läsa JSON-filer i JavaScript är en mycket viktig uppgift för en webbutvecklare eftersom JSON-filer används för att lagra användardata, konfigurationsdata, statisk data och annan viktig information.</span></p> <p dir='ltr'><span>Den här guiden förklarade tre metoder för att läsa JSON-filer i JavaScript med exempel. Genom att förstå dessa tekniker kan utvecklare med säkerhet ta itu med JSON-filrelaterade uppgifter, vilket säkerställer smidigare utvecklingsprocesser och förbättrade användarupplevelser.</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/r-dataframe-function/">R Dataframe-Function</a> </li><li> <a href="/maths-class-11-cat/">Matematik-Klass-11</a> </li><li> <a href="/matplotlib-pyplot-class/">Matplotlib Pyplot-Klass</a> </li><li> <a href="/sql-server/">Sql-Server</a> </li><li> <a href="/cpp-array/">Cpp-Array</a> </li><li> <a href="/cpp-strings-library/">Cpp-Strängar-Bibliotek</a> </li><li> <a href="/python-function-programs/">Python Funktionsprogram</a> </li><li> <a href="/summary/">Sammanfattning</a> </li><li> <a href="/figma/">Figma</a> </li><li> <a href="/java-random-class/">Java Random Class</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Skillnaden mellan Cougar och Panther</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Cougar är distinkt art, medan panter ofta kallas mörkfärgade katter, framför allt jaguarer och leoparder.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/difference-between-cougar"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/simplify-2">Förenkla (2x)2</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cte-sql">CTE i SQL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/tee-command-linux-with-examples">tee-kommando i Linux med exempel</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/disk-operating-system-commands">Kommandon för diskoperativsystem</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-array">Vad är Array?</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">Populära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/bash-loop">för loop bash</a>
</li><li><a href="/java-escape-characters">escape karaktär java</a>
</li><li><a href="/how-sort-string-array-java">java sorteringssträngar</a>
</li><li><a href="/c-map-find-function">hitta i kartan c++</a>
</li><li><a href="/pandas-melt">panda smälter</a>
</li><li><a href="/how-sort-arraylist-java">sortera arraylist i java</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 Alla Rättigheter Förbehållna | <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>