पाठ 25, कुल 30 में

JavaScript JSON — डेटा भेजने का तरीका

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

JavaScript Errors — try, catch, finally से error पकड़िए JavaScript Arrow Functions — छोटा रूप, बड़ा फर्क

वेबसाइटें शायद ही कभी अकेले काम करती हैं। आपका पेज server से बात करता है: वह किसी छात्र का record माँगता है, courses की सूची माँगता है, या चाय का order माँगता है — और server जवाब देता है। वह जवाब text के रूप में यात्रा करता है, क्योंकि text एक ऐसी चीज़ है जिसे हर कंप्यूटर पढ़ सकता है। उस text के format को JSON कहते हैं — JavaScript Object Notation। यह JavaScript object जैसा दिखता है, पर यह सिर्फ text है।

Diagram — देखें, यह सब कैसे जुड़ता है

इसे एक पत्र की तरह सोचिए। JavaScript object एक पार्सल है — उसमें असली चीज़ें हैं जिन्हें आप सीधे इस्तेमाल कर सकते हैं। JSON वह पत्र है जो पार्सल का वर्णन करता है, ताकि वह डाक से यात्रा कर सके। जब पत्र पहुँचता है, तो आप उसे खोलते हैं और पार्सल फिर से बनाते हैं। JSON.stringify() पत्र लिखता है। JSON.parse() उसे खोलता है।

JSON.stringify — object से text

let student = { name: "Priya", course: "HTML", marks: 92 };
let text = JSON.stringify(student);
// text is '{"name":"Priya","course":"HTML","marks":92}'

नतीजा एक सादा string है। आप उसे server को भेज सकते हैं, browser की storage में save कर सकते हैं, या पेज पर छाप सकते हैं। ध्यान दीजिए, double quotes हैं — JSON में नामों और string values के चारों ओर हमेशा double quotes होते हैं। Single quotes JSON में नहीं चलते।

JSON.parse — text से वापस object

let back = JSON.parse(text);
console.log(back.name); // "Priya"

JSON.parse() text पढ़ता है और object फिर से बनाता है, ताकि आप back.name और back.marks को सामान्य रूप से इस्तेमाल कर सकें। अगर text टूटा हुआ है — कोई quote छूट गया हो, आखिर में comma हो — तो parse error फेंकता है, इसलिए उसे try...catch में लपेटना अच्छा रहता है (पिछला पाठ)।

Note: JSON JavaScript object जैसा दिखता है, पर वह object नहीं है। तीन नियम: नाम double quotes में होने चाहिए, values सिर्फ strings, numbers, booleans, null, arrays या objects हो सकती हैं — न functions, न undefined, न comments, और आखिरी item के बाद trailing comma नहीं। अगर आप कोई नियम तोड़ेंगे, तो JSON.parse() fail होगा।

JSON आपको हर दिन कहाँ मिलता है

डेटा लाना — जब पेज server से courses की सूची या exam results लोड करता है, तो जवाब लगभग हमेशा JSON होता है।
Browser storage — localStorage सिर्फ strings save कर सकता है, इसलिए आप object को save करने से पहले stringify करते हैं और पढ़ते समय parse करते हैं।
Forms और APIs — जब form server को भेजा जाता है, तो डेटा आमतौर पर पहले JSON में पैक किया जाता है।

Tip: ऐसे याद रखिए: JSON एक पत्र है, पार्सल नहीं — text जो object का वर्णन करता है। stringify पत्र लिखता है, parse उसे खोलता है। अगर आपको याद है कि कौन-सा किस तरफ़ जाता है, तो आप उन्हें कभी नहीं मिलाएँगे।

आम गलतियाँ

JSON में single quotes इस्तेमाल करना — {'name': 'Priya'} सही JavaScript है, पर टूटा हुआ JSON है। JSON को double quotes चाहिए।
Trailing comma छोड़ना — {"a": 1,} parse नहीं होता। आखिरी item के बाद comma नहीं होता।
JSON में function डालना — functions stringify से चुपचाप हटा दिए जाते हैं। JSON डेटा ले जाता है, व्यवहार नहीं।
यह भूल जाना कि parse खराब text पर error फेंकता है — जब text आपके code के बाहर से आता है, तो उसे try...catch में लपेटिए।
Parse किए हुए नतीजे को string की तरह इस्तेमाल करना — parse के बाद आपके पास असली object है, इसलिए back.name इस्तेमाल कीजिए, text की तरह back["name"] नहीं।

याद रखें

JSON वह text है जो object जैसा दिखता है — इसी तरह कंप्यूटरों के बीच डेटा यात्रा करता है।
JSON.stringify(object) object को JSON string में बदलता है।
JSON.parse(text) JSON string को वापस object में बदलता है।
JSON के नियम: सिर्फ double quotes, कोई functions नहीं, कोई trailing commas नहीं।
JSON एक पत्र है, पार्सल नहीं — text जो object का वर्णन करता है।

उदाहरण समझिए

let student = { name: "Rahul", course: "CSS", marks: 88 }; — एक सामान्य JavaScript object, पार्सल।
let text = JSON.stringify(student); — पत्र लिखता है: एक string जिसमें हर नाम और string value के चारों ओर double quotes हैं।
document.getElementById("jsonText").textContent = text; — JSON text पेज पर box में दिखाया जाता है, ताकि आप ठीक देख सकें कि server को क्या जाता है।
let back = JSON.parse(text); — पत्र फिर से खोलता है और object फिर से बनाता है।
document.getElementById("out").textContent = back.name + " scored " + back.marks; — फिर से बना object असली जैसा काम करता है: back.name "Rahul" है और back.marks 88 है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Student Card — JSON</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 380px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
pre { background-color: #f1f5f9; padding: 10px; }
#out { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Student Card</h1>
<div class="card">
<p><button onclick="sendCard()">Send my card as JSON</button></p>
<p>The JSON text that travels:</p>
<pre id="jsonText">{"name":"Rahul","course":"CSS","marks":88}</pre>
<p id="out">Click the button to pack the card, send it, and open it again.</p>
</div>

<script>
function sendCard() {
  let student = { name: "Rahul", course: "CSS", marks: 88 };
  let text = JSON.stringify(student);
  document.getElementById("jsonText").textContent = text;
  let back = JSON.parse(text);
  document.getElementById("out").textContent = back.name + " scored " + back.marks + " in " + back.course + ".";
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Student Card — JSON</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 380px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
pre { background-color: #f1f5f9; padding: 10px; }
#out { font-weight: bold; color: green; }
</style>
</head>
<body>

<h1>Student Card</h1>
<div class="card">
<p><button onclick="sendCard()">Send my card as JSON</button></p>
<p>The JSON text that travels:</p>
<pre id="jsonText">{"name":"Rahul","course":"CSS","marks":88}</pre>
<p id="out">Click the button to pack the card, send it, and open it again.</p>
</div>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।