परिचय
JSON.parse() मेथड का उपयोग JSON टेक्स्ट (स्ट्रिंग) को जावास्क्रिप्ट ऑब्जेक्ट में परिवर्तित करने के लिए किया जाता है। यह JSON डेटा के साथ काम करने के लिए आवश्यक है जो APIs से प्राप्त होता है या स्थानीय भंडारण में संग्रहीत होता है।
उदाहरण
निम्न कोड JSON टेक्स्ट को जावास्क्रिप्ट JSON ऑब्जेक्ट में परिवर्तित करने के लिए है:
<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JSON पार्स</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; color: red; } </style> </head> <body> <h1>JSON parse() मेथड</h1> <div class="sample"> {"name":"रोहन", "sports":["क्रिकेट","फुटबॉल"], "country":"भारत"} </div> <div class="result"></div> <button class="Btn">यहाँ क्लिक करें</button> <h3> उपरोक्त JSON स्ट्रिंग को पार्स करने के लिए ऊपर दिए गए बटन पर क्लिक करें </h3> <script> const sampleEle = document.querySelector(".sample"); const resultEle = document.querySelector(".result"); let parsedJson; try { parsedJson = JSON.parse(sampleEle.innerHTML); } catch (e) { resultEle.innerHTML = 'अमान्य JSON: ' + e.message; } document.querySelector(".Btn").addEventListener("click", () => { if (parsedJson) { resultEle.innerHTML = "नाम = " + parsedJson.name + "<br>"; resultEle.innerHTML += "देश = " + parsedJson.country + "<br>"; resultEle.innerHTML += "खेल = " + parsedJson.sports.join(', '); } }); </script> </body> </html>
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:
"यहाँ क्लिक करें" बटन पर क्लिक करने पर:
महत्वपूर्ण बिंदु
JSON.parse()सिंक्रोनस है और अमान्य JSON परSyntaxErrorफेंकता है- दूसरे पैरामीटर के रूप में
reviverफ़ंक्शन स्वीकार करता है परिवर्तन के लिए - विपरीत ऑपरेशन:
JSON.stringify(obj)- ऑब्जेक्ट को JSON स्ट्रिंग में परिवर्तित करता है - JSON में फ़ंक्शन्स,
undefined,Symbol, साइक्लिक रेफरेंसेस नहीं हो सकते
Reviver फ़ंक्शन उदाहरण
const obj = JSON.parse(jsonStr, (key, value) => {
if (key === 'date') return new Date(value); // डेट स्ट्रिंग्स को डेट ऑब्जेक्ट में बदलें
return value;
});
