JavaScript में JSON
पिछला पन्ना सिर्फ़ कॉल का रूप बदल रहा था और this उसी कॉल के साथ जा रहा था। यह पन्ना उस बात को किनारे रखता है। सामान अभी मेमोरी में है, नाम और कीमत ऑब्जेक्ट पर बैठे हैं। यही बातें किसी फ़ाइल, किसी दूसरे प्रोग्राम या अगले पन्ने को देनी हों तो एक तय रूप वाला पाठ चाहिए। उस पाठ का नाम JSON है।
जीवित ऑब्जेक्ट यह नोट नहीं है
जब तक स्क्रिप्ट चलती है, लिटरल वहीं रहता है और उस पर मेथड रखा जा सकता है; this अब भी कॉल के रूप पर निर्भर है, पिछले पाठ की तरह। JSON सिर्फ़ एक स्ट्रिंग है: उसमें मेथड नहीं, और वह खुद this नहीं चुनता।
पाठ में क्या रखा जा सकता है
📊 जीवित ऑब्जेक्ट बनाम JSON पाठ
| हिस्सा | ऑब्जेक्ट लिटरल | JSON पाठ |
|---|---|---|
| कुंजी के उद्धरण | वैकल्पिक | दोहरे उद्धरण ज़रूरी |
| स्ट्रिंग के उद्धरण | एकल या दोहरे | केवल दोहरे |
| आखिरी अल्पविराम | चलता है | मना है |
| फ़ंक्शन | मेथड हो सकता है | stringify उसे छोड़ देता है; पाठ में लिखना अवैध है |
| undefined फ़ील्ड | असली मान | stringify जब ऑब्जेक्ट पर चलता है तो उसे छोड़ देता है |
लिटरल की आदत इस पाठ में मत लाओ। हर कुंजी और हर स्ट्रिंग को दोहरा उद्धरण चाहिए। आखिरी अतिरिक्त अल्पविराम, पाठ के अंदर टिप्पणी, और नंगा फ़ंक्शन, इनमें से कोई वैध JSON नहीं। तालिका बताती है कौन-सी आदत हट जाती है और किसे parse मानता ही नहीं।
let product = {
name: "Mug",
price: 12
};
console.log(JSON.stringify(product));
stringify नोट लिखता है
JSON.stringify सादे फ़ील्ड पर चलता है और एक स्ट्रिंग लौटाता है; कंसोल {"name":"Mug","price":12} दिखाता है और product ज्यों का त्यों रहता है। नाम अब भी जीवित ऑब्जेक्ट से पढ़ते हो और Mug मिलता है। स्ट्रिंग अलग मान है, जिसे सहेजा या भेजा जा सकता है।
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
console.log(product.name);
parse नोट से मान बनाता है
text अब भी स्ट्रिंग है, उद्धरण और ब्रेसेस समेत। JSON.parse उसी पाठ से नया ऑब्जेक्ट बनाता है। उसके बाद product.name बराबर Mug होता है। यहाँ कोई मेथड नहीं चलता और this काम में नहीं आता।
let text = '{"name":"Mug","tags":["ceramic","gift"]}';
let product = JSON.parse(text);
console.log(product.tags[0]);
सूची नोट के अंदर बैठ सकती है
JSON पाठ ऐरे रख सकता है; parse के बाद product.tags असली ऐरे होता है और पहली जगह ceramic होती है। ऐरे अपना अलग विषय अगले पाठ में है, यहाँ वह केवल पाठ का सामान है।
let product = {
name: "Mug",
price: undefined,
tag() {
return this.name;
}
};
console.log(JSON.stringify(product));
नोट डेटा रखता है, व्यवहार नहीं
price का मान undefined था। tag एक फ़ंक्शन था। दोनों पाठ से गायब हो जाते हैं। छपता है केवल {"name":"Mug"}। व्यवहार जीवित ऑब्जेक्ट पर रहता है और नोट में नहीं आता।
let text = "{name:'Mug'}";
try {
JSON.parse(text);
console.log("ok");
} catch (err) {
console.log("bad text");
}
ढीला नोट parse नहीं होता
एकल उद्धरण और बिना उद्धरण की कुंजी लिटरल में चलती हैं, JSON में नहीं; इसलिए JSON.parse गलती फेंकता है और catch इस डेमो को गिराने के बजाय bad text छापता है। कुंजी और स्ट्रिंग पर दोहरे उद्धरण लगाकर पाठ सुधारो। यह अभी त्रुटियों का पाठ नहीं है, केवल इतना दिखाता है कि खराब JSON parse को रोक देता है।
दिशा पता हो तो औज़ार पता है
मेमोरी से पाठ की ओर stringify से जाते हो, और पाठ से मान की ओर parse से लौटते हो। बाद में सामान पर फ़ंक्शन चाहिए तो उसे parse के बाद जोड़ो, क्योंकि नोट फ़ंक्शन साथ नहीं लाया। this अब भी कॉल के रूप पर निर्भर है, JSON पर नहीं, और अगला पाठ ऐरे है: स्क्रिप्ट में जीवित सूची, JSON का नया नियम नहीं।
नोट का एक फ़ील्ड पेज पर दिखाओ
छोटी उत्पाद-स्ट्रिंग को parse करो। नाम को अनुच्छेद में लिखो। स्क्रिप्ट में ब्रेसेस से ऑब्जेक्ट मत बनाओ।
<!DOCTYPE html>
<html>
<head>
<title>json — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let text = '{"name":"Mug","price":12}';
let product = JSON.parse(text);
let box = document.getElementById("line");
box.textContent = product.name;
</script>
</body>
</html>
अनुच्छेद Mug दिखाता है, क्योंकि स्क्रिप्ट ने लिटरल नहीं बनाया, केवल पाठ पढ़ा। स्ट्रिंग के अंदर नाम बदलो और पेज ताज़ा करो, तब वही पंक्ति बदल जाती है।
अभ्यास के कदम
- मग पर stringify करो और उद्धरण वाला पाठ पढ़ो; फिर वही रूप parse करके
Mugदेखो। - जिस नोट में
tagsहै उसे parse करो औरceramicपढ़ो। - मेथड और
undefinedकीमत वाले ऑब्जेक्ट पर stringify करो ताकि पाठ में केवलnameबचे, और बिना उद्धरण की कुंजी वाला नोटtry/catchमें रखो ताकिbad textछपे। - HTML डेमो में केवल स्ट्रिंग के अंदर का नाम बदलो, ताज़ा करो, और अनुच्छेद पढ़ो।
आम फिसलन
- JSON पाठ को ऑब्जेक्ट लिटरल समझ लेना, और एकल उद्धरण या नंगी कुंजी
parseको दे देना - यह उम्मीद रखना कि मेथड या
undefinedstringifyसे बच जाए - पाठ चाहिए था तब
parseबुलाना, या पाठ पहले से था तबstringifyबुलाना; और नाम खुद स्ट्रिंग पर पढ़ना, उस मान पर नहीं जोparseने बनाया - अगले पन्ने को और JSON समझना, जबकि ऐरे एक जीवित सूची है
सार
- JSON वह पाठ है जो डेटा बताता है, और
stringifyसादे ऑब्जेक्ट को वही पाठ बनाता है parseपाठ को फिर मान बनाता है- कुंजी और स्ट्रिंग को दोहरा उद्धरण चाहिए; अतिरिक्त अल्पविराम या एकल उद्धरण
parseको गिरा देते हैं - मेथड और
undefinedफ़ील्ड पाठ से हट जाते हैं - parse किया फ़ील्ड पेज की एक पंक्ति भर सकता है, और अगला पाठ ऐरे है, स्क्रिप्ट की जीवित सूची
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी