जावास्क्रिप्ट में बाहरी JSON फ़ाइल कैसे पढ़ें

<घंटा/>

मान लीजिए हमारे पास एक JSON फ़ाइल config.json है जिसमें निम्न डेटा है -

{
   "secret": "sfsaad7898fdsfsdf^*($%^*$",
   "connectionString":
   "mongodb+srv://username:password@cluster0.laaif.mongodb.net/events?retryWrites=tr
   ue&w=majority",
   "localConnectionString":
   "mongodb+srv://username:password@cluster0.laaif.mongodb.net/eventsLocal?retryWrit
   es=true&w=majority",
   "frontendClient": "https://helloworld.com",
   "localFrontendClient": "https://localhost:3000"
}

और उसी निर्देशिका (फ़ोल्डर) में, हमारे पास एक JavaScript फ़ाइल है index.js ।

हमारा काम जावास्क्रिप्ट फ़ाइल के माध्यम से json फ़ाइल की सामग्री तक पहुँच प्राप्त करना है।

विधि 1:आवश्यकता मॉड्यूल का उपयोग करना (केवल NodeJS वातावरण)

यदि हम NodeJS वातावरण में अपनी JavaScript फ़ाइल चला रहे हैं, तो हम json फ़ाइल तक पहुँचने के लिए आवश्यक मॉड्यूल का उपयोग कर सकते हैं।

उदाहरण

इसके लिए कोड होगा -

const configData = require('./config.json');
console.log(typeof configData);
console.log(configData);

विधि 2:ES6 आयात मॉड्यूल का उपयोग करना (केवल वेब रनटाइम वातावरण)

यदि हम ब्राउज़र में जावास्क्रिप्ट चलाते समय json फ़ाइल को एक्सेस करना चाहते हैं, तो हम ऐसा करने के लिए ES6 आयात सिंटैक्स का उपयोग कर सकते हैं।

उदाहरण

इसके लिए कोड होगा -

एचटीएमएल फ़ाइल:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>READ JSON FILE</title>
</head>
<body>
<p id='main'></p>
<script type="module" src="./index.js"></script>
</body>
</html>

जावास्क्रिप्ट फ़ाइल:

import configData from './config.json';
document.getElementById('main').innerHTML = JSON.stringify(configData);

आउटपुट

और आउटपुट होगा -

{
   secret: 'sfsaad7898fdsfsdf^*($%^*$',
   connectionString:
   'mongodb+srv://username:password@cluster0.laaif.mongodb.net/events?retryWrites=tr
   ue&w=majority',
   localConnectionString:
   'mongodb+srv://username:password@cluster0.laaif.mongodb.net/eventsLocal?retryWrit
   es=true&w=majority',
   frontendClient: 'https://helloworld.com',
   localFrontendClient: 'https://localhost:3000'
}