Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट JSON:एक गाइड

JSON, JavaScript ऑब्जेक्ट नोटेशन के लिए संक्षिप्त, डेटा संग्रहीत करने का एक तरीका है। JSON ऑब्जेक्ट्स में, मानों को कुंजियों नामक लेबल से मैप किया जाता है। JSON ऑब्जेक्ट स्ट्रिंग्स, पूर्णांकों और अन्य JSON मानों सहित किसी भी डेटा प्रकार को संग्रहीत कर सकते हैं।

JSON एक मानक फ़ाइल स्वरूप है जो आपको डेटा संग्रहीत और साझा करने की अनुमति देता है। जावास्क्रिप्ट, पायथन और पीएचपी जैसी प्रोग्रामिंग भाषाएं सभी JSON डेटा में हेरफेर और पढ़ने का समर्थन करती हैं।

इस गाइड में, हम यह पता लगाने जा रहे हैं कि जावास्क्रिप्ट JSON का उपयोग कैसे करें। हम JSON प्रारूप की मूल बातें और एक JSON ऑब्जेक्ट की तुलना किसी JavaScript ऑब्जेक्ट से कैसे करेंगे, इसका पता लगाएंगे।

JSON क्या है?

JSON डेटा स्टोर करने और साझा करने का एक तरीका है। यह जावास्क्रिप्ट ऑब्जेक्ट सिंटैक्स पर आधारित है। अंतर यह है कि JSON पूरी तरह से टेक्स्ट पर आधारित है, जबकि ऑब्जेक्ट नहीं हैं। JSON का मतलब जावास्क्रिप्ट ऑब्जेक्ट नोटेशन है।

जबकि JSON जावास्क्रिप्ट प्रोग्रामिंग भाषा के सिद्धांतों पर आधारित है, इसका उपयोग कई अन्य भाषाओं जैसे PHP, Java और Ruby में किया जाता है।

आप JSON डेटा को फ़ाइल के रूप में या प्रोग्राम में मान के रूप में स्टोर कर सकते हैं। उदाहरण के लिए, किसी प्रोग्राम में mtg_cards.json . नामक फ़ाइल शामिल हो सकती है जो मैजिक द गैदरिंग कार्ड की एक सूची संग्रहीत करता है। हम उस डेटा को mtg_cards . नामक JavaScript वैरिएबल में स्टोर कर सकते हैं ।

यहाँ JSON में संग्रहीत डेटा के एक टुकड़े की संरचना है:

{
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact"
	"mana": "0"
}

JSON की-वैल्यू पेयर नामक संरचना का उपयोग करके डेटा संग्रहीत करता है। कुंजी-मूल्य जोड़े डेटा के टुकड़े होते हैं जो निम्नलिखित संरचना का उपयोग करते हैं:"कुंजी":"मान"।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

कार्ड_नाम कुंजी का उदाहरण है। मान एक कोलन के दाईं ओर होते हैं। JSON में, आप कुंजी नामों को स्ट्रिंग के रूप में संग्रहीत करते हैं, लेकिन मान कोई भी डेटा प्रकार जैसे बूलियन या पूर्णांक हो सकते हैं।

JSON अक्सर डेटा भेजने के लिए API होता है। उदाहरण के लिए, मान लें कि आप Airtable या Fitbit API का उपयोग करते हैं। आपको JSON डेटा प्रारूप में डेटा भेजने और डेटा पढ़ने की आवश्यकता होगी।

JavaScript JSON डेटा कैसे एक्सेस करें

जावास्क्रिप्ट में JSON डेटा तक पहुँचने के लिए, आप वर्ग कोष्ठक या डॉट नोटेशन का उपयोग कर सकते हैं। वर्गाकार कोष्ठक संकेतन उसी तरह है जैसे आप किसी JavaScript सरणी से किसी मान को कैसे प्राप्त करेंगे। इंडेक्स स्थिति निर्दिष्ट करने के बजाय, आप उस कुंजी का नाम निर्दिष्ट करते हैं जिसका मूल्य आप पुनर्प्राप्त करना चाहते हैं।

पहले से हमारे ऑब्जेक्ट पर विचार करें, अब JSON ऑब्जेक्ट के रूप में स्वरूपित:

var black_lotus = {
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

इस उदाहरण में, हमने अपने JSON ऑब्जेक्ट को वेरिएबल black_lotus . को असाइन किया है . मान लीजिए कि आप ब्लैक लोटस के लिए कार्ड के प्रकार का पता लगाना चाहते हैं। यह ट्रेडिंग कार्ड गेम में एक प्रतिबंधित कार्ड है मैजिक द गैदरिंग .

स्क्वायर ब्रैकेट

स्क्वायर ब्रैकेट नोटेशन का उपयोग करके, हम ब्लैक लोटस कार्ड के कार्ड प्रकार का पता लगा सकते हैं।

इस संकेतन का उपयोग करने के लिए, हमें उस वस्तु का नाम निर्दिष्ट करना होगा जिससे हम एक मान प्राप्त करना चाहते हैं। फिर, हम उस मान से जुड़ी कुंजी का नाम निर्दिष्ट करते हैं। आपको मुख्य नाम को उद्धरण चिह्नों और वर्गाकार कोष्ठकों में संलग्न करना होगा।

निम्न कोड ब्लैक लोटस के कार्ड प्रकार पर डेटा पुनर्प्राप्त करता है:

console.log(black_lotus["card_type"])

हमारा कोड लौटाता है:मोनो आर्टिफ़ैक्ट . हमने अपने मुख्य नाम को दोहरा-उद्धृत किया है, इसे वर्गाकार कोष्ठकों से घिरा हुआ है, फिर हमने इसे black_lotus चर के अंत में जोड़ दिया है। यह हमें card_type . नाम से संग्रहीत डेटा तक पहुंचने की अनुमति देता है ।

डॉट नोटेशन

डॉट नोटेशन वह जगह है जहां आप किसी ऑब्जेक्ट का नाम निर्दिष्ट करके किसी ऑब्जेक्ट तक पहुंचते हैं, उसके बाद एक बिंदु। फिर आप उस कुंजी का नाम निर्दिष्ट करते हैं जिसका मूल्य आप एक्सेस करना चाहते हैं।

डॉट नोटेशन का उपयोग करके कार्ड प्रकार के ब्लैक लोटस तक पहुंचने के लिए, आप इस कोड का उपयोग कर सकते हैं:

console.log(black_lotus.card_type)

हमारा कोड लौटाता है:"मोनो आर्टिफैक्ट"।

हमने अपनी वस्तु का नाम निर्दिष्ट किया है ("black_lotus ”), उसके बाद वह कुंजी जिसका मूल्य हम एक्सेस करना चाहते हैं ("card_type ”)।

JSON रूपांतरण

अक्सर, जब आप किसी ऑब्जेक्ट के साथ काम कर रहे होते हैं, तो आप उसे JSON स्ट्रिंग में बदलना चाहते हैं, या इसके विपरीत। यदि आप किसी वेब सर्वर पर डेटा भेजना चाहते हैं तो यह सामान्य अभ्यास है।

JSON जावास्क्रिप्ट जैसी तकनीकों में हेरफेर करना आसान है। एक सादे स्ट्रिंग से सभी मान निकालना बहुत मुश्किल होगा।

सबसे पहले, आप किसी ऑब्जेक्ट को एक स्ट्रिंग में बदलना चाहेंगे ताकि आप उसे सर्वर पर भेज सकें। फिर आप इसे वापस किसी ऑब्जेक्ट में बदलना चाहेंगे ताकि आप डेटा को किसी ऑब्जेक्ट की तरह व्यवहार कर सकें।

किसी ऑब्जेक्ट को JSON स्ट्रिंग में बदलने के लिए, आप JSON.stringify () फ़ंक्शन का उपयोग कर सकते हैं। मान लीजिए कि हम अपनी ब्लैक लोटस वस्तु को पहले से एक स्ट्रिंग में बदलना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:

var black_lotus = {
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

var string_black_lotus = JSON.stringify(black_lotus)

console.log(string_black_lotus)

हमारा कोड निम्नलिखित JSON टेक्स्ट लौटाता है:

“{“card_name”:”Black Lotus”,”status”:”banned”,”card_type”:”Mono Artifact”,”mana”:”0″}”

जैसा कि आप देख सकते हैं, हमारा JSON डेटा एक स्ट्रिंग है। आप इस स्ट्रिंग को वापस JSON ऑब्जेक्ट में बदलने के लिए JSON.parse() विधि का उपयोग कर सकते हैं:

var black_lotus_object = JSON.parse(string_black_lotus)

console.log(black_lotus_object)

यह कोड लौटाता है:

{
	"card_name": "Black Lotus",
	"status": "banned",
	"card_type": "Mono Artifact",
	"mana": "0"
}

जैसा कि आप देख सकते हैं, हमारा डेटा अब एक वस्तु है।

JSON बनाम JavaScript ऑब्जेक्ट

JSON संकेतन JavaScript ऑब्जेक्ट पर आधारित था।

क्योंकि JSON को कई प्रोग्रामिंग भाषाओं में समर्थित होने के लिए डिज़ाइन किया गया था, यह बिल्कुल JavaScript ऑब्जेक्ट के समान नहीं है। उदाहरण के लिए, JSON PHP और Python में समर्थित है। JSON का समर्थन करने वाली प्रत्येक प्रोग्रामिंग भाषा का अपना विशिष्ट कार्यान्वयन होता है।

जबकि JavaScript ऑब्जेक्ट में कुंजियों को उद्धरण चिह्नों में संग्रहीत नहीं किया जाता है, JSON डेटा में कुंजियों को उद्धरण चिह्नों में संग्रहीत किया जाना चाहिए।

यदि आप JSON फ़ाइल में देखते हैं, तो आप देखेंगे कि सभी कुंजियाँ उद्धरण चिह्नों से घिरी हुई हैं। यदि आप किसी JavaScript ऑब्जेक्ट को देखते हैं, तो आप देखेंगे कि हो सकता है कि कुंजियाँ उद्धरण चिह्नों से घिरी न हों।

JSON और JavaScript दोनों ऑब्जेक्ट डेटा को की-वैल्यू स्ट्रक्चर में स्टोर करते हैं।

निष्कर्ष

जावास्क्रिप्ट JSON में डेटा संग्रहीत करने का समर्थन करता है। JSON, जावास्क्रिप्ट ऑब्जेक्ट नोटेशन के लिए संक्षिप्त, संबंधित डेटा को एक ऑब्जेक्ट में संग्रहीत करने का एक तरीका है। ऑब्जेक्ट में प्रत्येक मान का अपना लेबल होता है, जिसे एक कुंजी भी कहा जाता है।

अब आप उस ज्ञान से लैस हैं जो आपको एक पेशेवर की तरह जावास्क्रिप्ट में JSON का उपयोग करने की आवश्यकता है!

क्या आप जावास्क्रिप्ट के बारे में अधिक जानना चाहते हैं? हमारी जावास्क्रिप्ट कैसे सीखें गाइड देखें। आपको जावास्क्रिप्ट सीखने के बारे में शीर्ष युक्तियाँ और शुरुआती और मध्यवर्ती डेवलपर्स के लिए सीखने के संसाधनों की एक सूची मिलेगी।


  1. जावास्क्रिप्ट JSON HTML

    JSON डेटा का उपयोग करके HTML उत्पन्न करने के लिए, कोड इस प्रकार है - नोट - JSONPlaceholder परीक्षण और प्रोटोटाइप के लिए एक नकली ऑनलाइन REST API है उदाहरण दस्तावेज़ बॉडी { फॉन्ट-फ़ैमिली:सेगो यूआई, ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } .नमूना { फ़ॉन्ट-आकार:18पीएक्स; फ़ॉन्ट-वजन:500; लाल रंग; }JSON

  1. जावास्क्रिप्ट JSON सरणियाँ

    JSON में Arrays जावास्क्रिप्ट में Arrays के समान हैं। जावास्क्रिप्ट JSON सरणियाँ इस तरह दिखती हैं - let obj = {    name:'Rohan',    sports : ['cricket','Football','volleyball','hockey'] } जावास्क्रिप्ट में JSON सरणियों के लिए कोड निम्नलिखि

  1. जावास्क्रिप्ट में टेक्स्टरेरा इनपुट में JSON डेटा को सुंदर बनाएं?

    इसके लिए JSON.stringify() के साथ JSON.parse() का इस्तेमाल करें। उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Document</