JSON मॉड्यूल स्क्रिप्ट, अब बेसलाइन के तौर पर उपलब्ध हैं

उपलब्ध है. कीवर्ड: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

पब्लिश होने की तारीख: 18 जून, 2025

अगर आपको किसी JavaScript मॉड्यूल में JSON फ़ाइल इंपोर्ट करनी है, तो पहले आपको JavaScript में JSON को एम्बेड करना पड़ता था. ऐसा इसलिए किया जाता था, ताकि आप सामान्य import स्टेटमेंट का इस्तेमाल कर सकें. इसके अलावा, fetch() की मदद से फ़ाइल डाउनलोड करके, Response.json() को कॉल किया जा सकता था. यह समस्या अब सभी आधुनिक ब्राउज़र में हल हो गई है. इसकी वजह JSON मॉड्यूल स्क्रिप्ट और इंपोर्ट एट्रिब्यूट हैं.

यहां दिए गए सैंपल में दिखाया गया है कि JavaScript मॉड्यूल स्क्रिप्ट से, JSON मॉड्यूल स्क्रिप्ट को कैसे इंपोर्ट किया जा सकता है:

import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };

const {explanation, title, url} = astronomyPictureOfTheDay;

document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });

JSON.parse() की ज़रूरत नहीं है. JSON को import के बाद पार्स किया जाता है और वह इस्तेमाल के लिए तैयार हो जाता है. यह इसलिए काम करता है, क्योंकि ब्राउज़र को पहले से पता होता है कि उसे JSON के साथ काम करना है. इसकी जानकारी, इंपोर्ट एट्रिब्यूट with { type: "json" } की मदद से दी जाती है.

JSON मॉड्यूल इंपोर्ट के लाइव डेमो को देखें. इसमें, पिछली लिस्टिंग के कोड का इस्तेमाल किया गया है.

मॉड्यूल स्क्रिप्ट के लिए, MIME टाइप की सख्त जांच की जाती है. JSON मॉड्यूल स्क्रिप्ट को फ़ेच करने के लिए, एचटीटीपी रिस्पॉन्स में JSON MIME टाइप होना चाहिए. उदाहरण के लिए, Content-Type: text/json.

अगर स्टेटमेंट के with { type: "json" } हिस्से को छोड़ दिया जाता है, तो ब्राउज़र यह मान लेता है कि मकसद JavaScript मॉड्यूल स्क्रिप्ट इंपोर्ट करना है. अगर एचटीटीपी रिस्पॉन्स का MIME टाइप, JavaScript MIME टाइप नहीं है, तो फ़ेच नहीं हो पाएगा.

एचटीएमएल स्पेसिफ़िकेशन में, JSON मॉड्यूल स्क्रिप्ट प्रोसेसिंग के बारे में ज़्यादा पढ़ा जा सकता है.