TL;DR: आइए देखें कि दो तालिकाओं को जोड़ने के लिए सिंकफ्यूजन जावास्क्रिप्ट क्वेरी बिल्डर का उपयोग कैसे करें। यह ब्लॉग आपको एक कस्टम जॉइनकंपोनेंट बनाने और सूची बॉक्स और ड्रॉपडाउन का उपयोग करके WHERE, SELECT, और JOIN क्लॉज को कॉन्फ़िगर करने में मार्गदर्शन करता है। चरण कुशल क्वेरी निर्माण सुनिश्चित करते हैं, जिससे जटिल डेटा स्रोतों को कनेक्ट करना और प्रबंधित करना आसान हो जाता है। संपूर्ण कोड उदाहरणों के लिए स्टैकब्लिट्ज़ डेमो देखें।

सिंकफ्यूजन जावास्क्रिप्ट क्वेरी बिल्डर एक इंटरैक्टिव यूआई तत्व है जिसे क्वेरीज़ बनाने के लिए डिज़ाइन किया गया है। इसकी समृद्ध विशेषताओं में JSON और SQL प्रारूपों में जटिल डेटा बाइंडिंग, टेम्प्लेटिंग, आयात और निर्यात क्वेरी शामिल हैं। इसके अतिरिक्त, यह डेटा प्रबंधक के साथ उपयोग के लिए प्रश्नों को विधेय में परिवर्तित कर सकता है।

यह ब्लॉग बताता है कि जावास्क्रिप्ट क्वेरी बिल्डर घटक का उपयोग करके दो तालिकाओं को कैसे जोड़ा जाए। यहां, हम दो अलग-अलग तालिकाओं को जोड़ने के लिए क्वेरी बिल्डर घटक को जटिल डेटा बाइंडिंग समर्थन के साथ एकीकृत करेंगे। हम SQL WHERE क्लॉज के लिए क्वेरी बनाएंगे, SELECT क्लॉज को तैयार करने के लिए एक सूची बॉक्स एम्बेड करेंगे, और जॉइन क्वेरी के निर्माण को सुव्यवस्थित करने के लिए एक ड्रॉपडाउन सूची बनाएंगे।

नोट: आगे बढ़ने से पहले, जावास्क्रिप्ट क्वेरी बिल्डर दस्तावेज़ के साथ शुरुआत करना देखें।

जावास्क्रिप्ट क्वेरी बिल्डर का उपयोग करके एक कस्टम घटक बनाएं

आइए एक कस्टम घटक बनाएं जिसे JoinComponent के रूप में जाना जाता है, जो सम्मिलित प्रश्नों के निर्माण की सुविधा प्रदान करता है और मापदंडों के एक सेट के माध्यम से लचीलापन प्रदान करता है। इस घटक के साथ, उपयोगकर्ता तत्व आईडी, तालिकाओं के लिए डेटा स्रोत, तालिका नाम और बाएँ और दाएँ ऑपरेंड निर्दिष्ट कर सकते हैं, जो सम्मिलित क्वेरीज़ के निर्माण के लिए आवश्यक हैं।

इस JoinComponent के भीतर, हम एक डायलॉग घटक के भीतर जावास्क्रिप्ट क्वेरी बिल्डर को एकीकृत करेंगे। हम उपयोगकर्ता के अनुभव को बढ़ाने और जॉइन ऑपरेशन को कॉन्फ़िगर करने और निष्पादित करने की प्रक्रिया को सुव्यवस्थित करने के लिए लिस्टबॉक्स और ड्रॉपडाउन सूची घटकों को भी शामिल करेंगे। परिणाम एक बहुमुखी और उपयोगकर्ता के अनुकूल घटक है जो सम्मिलित प्रश्नों के निर्माण को सरल बनाता है।

आप इस स्टैकब्लिट्ज़ रिपॉजिटरी में कस्टम JoinComponent बनाने के लिए कोड उदाहरण का उल्लेख कर सकते हैं।

जावास्क्रिप्ट क्वेरी बिल्डर का उपयोग करके दो तालिकाओं को जोड़ना

एक बार कस्टम घटक बन जाने के बाद, दो तालिकाओं को जोड़ने के लिए इन चरणों का पालन करें।

चरण 1: एक WHERE क्लॉज बनाएं

एसक्यूएल WHERE क्लॉज निर्दिष्ट शर्तों के अनुसार डेटाबेस में रिकॉर्ड को फ़िल्टर करता है।

इस संदर्भ में, हमारा जावास्क्रिप्ट क्वेरी बिल्डर घटक WHERE क्लॉज के लिए मूल्य प्राप्त करने में महत्वपूर्ण भूमिका निभाता है। यह जटिल डेटा बाइंडिंग का समर्थन करता है, दो तालिकाओं से जानकारी को संयोजित करके नियमों और एसक्यूएल प्रश्नों को उत्पन्न करने में सक्षम बनाता है। यह कार्यक्षमता जटिल तालिकाओं को निर्दिष्ट करने के लिए कॉलम निर्देश का उपयोग करके और घटक के भीतर एक विभाजक संपत्ति को शामिल करके प्राप्त की जाती है।

इन गुणों को कॉन्फ़िगर करके, क्वेरी बिल्डर को दो तालिकाओं के साथ प्रस्तुत किया जाएगा, जो नीचे दिए गए कोड स्निपेट के समान परिणामी जॉइन क्वेरी तैयार करेगा।

Employees.FirstName LIKE (“%Nancy%”)

चरण 2: एक चयन खंड बनाएं

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

चरण 3: एक जॉइन क्लॉज बनाएं

टेबलों को जोड़ने में संबंधित कॉलम या स्तंभों के आधार पर दो या दो से अधिक तालिकाओं की पंक्तियों को संयोजित करना शामिल है। यह कई तालिकाओं में वितरित डेटा को पुनः प्राप्त करता है और एक परिणाम सेट बनाता है जो उन तालिकाओं से प्रासंगिक जानकारी को जोड़ता है।

यहां तालिकाओं को जोड़ने के प्रमुख पहलू दिए गए हैं:

• संबंधित कॉलम: तालिका जोड़ उन स्तंभों पर निर्भर करते हैं जो तालिकाओं के बीच संबंध स्थापित करते हैं। आमतौर पर, ये कॉलम प्राथमिक और विदेशी कुंजी का प्रतिनिधित्व करते हैं। एक प्राथमिक कुंजी तालिका में प्रत्येक पंक्ति की पहचान करती है, और एक विदेशी कुंजी किसी अन्य तालिका की प्राथमिक कुंजी का संदर्भ देकर दो तालिकाओं के बीच एक लिंक बनाती है।
• जुड़ने के प्रकार: विभिन्न प्रकार के जोड़ होते हैं, जिनमें आंतरिक, बाएँ, दाएँ और पूर्ण बाहरी जोड़ शामिल हैं।
• जुड़ने की शर्तें: जुड़ने की शर्तें विभिन्न तालिकाओं से पंक्तियों के संयोजन के लिए मानदंड निर्दिष्ट करती हैं। इनमें आम तौर पर =, , , > इत्यादि जैसे ऑपरेटरों का उपयोग करके संबंधित कॉलम की तुलना करना शामिल होता है। शामिल होने की शर्तें भी शामिल हो सकती हैं इसमें एकाधिक कॉलम या जटिल अभिव्यक्तियाँ शामिल हैं।

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

निम्नलिखित छवि देखें।

चरण 4: कस्टम घटक को ऐप में एकीकृत करना

अपने ऐप में कस्टम JoinComponent को शामिल करने के लिए, इसे आयात करें और रेंडरिंग के दौरान इसे div तत्व के भीतर रखें। आप अपनी आवश्यकताओं के अनुरूप घटक को तैयार करने के लिए आवश्यक गुण प्रदान कर सकते हैं, अपने ऐप के उपयोगकर्ता इंटरफ़ेस में इसके एकीकरण को सुव्यवस्थित कर सकते हैं।

फ़िल्टर बटन पर क्लिक करने पर, क्वेरी बिल्डर घटक प्रदर्शित होगा, जो उपयोगकर्ताओं को एक क्वेरी बनाने की अनुमति देगा। इसके बाद, कॉपी बटन पर क्लिक करने से उत्पन्न क्वेरी क्लिपबोर्ड पर कॉपी हो जाएगी।

HTML पृष्ठ पर कस्टम घटक प्रस्तुत करने के लिए निम्नलिखित कोड उदाहरण देखें।

कस्टम घटक को प्रस्तुत करने के लिए निम्नलिखित टाइपस्क्रिप्ट कोड का संदर्भ लें।

import { JoinComponent } from './JoinComponent';

let ordersData = [
  { "OrderID": 10248, "CustomerID": 9, "EmployeeID": 5,"OrderDate": "7/4/1996","ShipperID": 3},
  { "OrderID": 10249, "CustomerID": 81, "EmployeeID": 6,"OrderDate": "7/5/1996","ShipperID": 1}
];

let employeesData = [
  { "EmployeeID": 1, "LastName": "Davolio", "FirstName": "Nancy", "BirthDate": "12/8/1968"},
  { "EmployeeID": 2, "LastName": "Fuller", "FirstName": "Andrew", "BirthDate": "2/19/1952 "},
  { "EmployeeID": 3, "LastName": "Leverling", "FirstName": "Janet", "BirthDate": "8/30/1963"},
  { "EmployeeID": 4, "LastName": "Peacock", "FirstName": "Margaret", "BirthDate": "9/19/1958"},
  { "EmployeeID": 5, "LastName": "Buchanan", "FirstName": "Steven", "BirthDate": "3/4/1955"},
  { "EmployeeID": 6, "LastName": "Suyama", "FirstName": "Michael", "BirthDate": "7/2/1963"}
];

let comp: JoinComponent = new JoinComponent(
          'join', // component ID
          ordersData, // left table
          employeesData, // right table
          'Orders', // left table name
          'Employees', // right table name
          'EmployeeID’, // left operand
          'EmployeeID' // right operand
);

क्वेरी बिल्डर और जॉइन कंपोनेंट यूजर इंटरफेस प्रदर्शित करने वाली निम्नलिखित छवियां देखें।

नमूना जॉइन क्वेरी इस प्रकार है, और आप इस लिंक का उपयोग करके सीधे इस क्वेरी को सत्यापित कर सकते हैं।

SELECT Orders.OrderID, Orders.OrderDate, Employees.EmployeeID FROM (Orders INNER JOIN Employees ON (Orders.EmployeeID = Employees.EmployeeID)) WHERE(Employees.FirstName LIKE ('%Nancy%'))

संदर्भ

अधिक जानकारी के लिए, स्टैकब्लिट्ज पर जावास्क्रिप्ट क्वेरी बिल्डर का उपयोग करके दो तालिकाओं को जोड़ने के लिए संपूर्ण कोड उदाहरण देखें।

निष्कर्ष

पढ़ने के लिए धन्यवाद! इस ब्लॉग में, हमने पता लगाया है कि सिंकफ़्यूज़न जावास्क्रिप्ट क्वेरी बिल्डर का उपयोग करके दो तालिकाओं को कैसे जोड़ा जाए। समान परिणाम प्राप्त करने के लिए इन चरणों का पालन करें, और बेझिझक नीचे टिप्पणी में अपने विचार या प्रश्न साझा करें।

यदि आप एक मौजूदा ग्राहक हैं, तो आप लाइसेंस और डाउनलोड पृष्ठ से एसेंशियल स्टूडियो का नवीनतम संस्करण डाउनलोड कर सकते हैं। सिंकफ़्यूज़न में नए लोगों के लिए, हमारी सभी सुविधाओं का पता लगाने के लिए हमारा 30-दिवसीय निःशुल्क परीक्षण आज़माएँ।

आप हमारे सहायता मंच, सहायता पोर्टल, या फीडबैक पोर्टल के माध्यम से हमसे संपर्क कर सकते हैं। हम आपको सफल होने में मदद करने के लिए यहां हैं!

संबंधित ब्लॉग

• वेब ऐप्स को अनधिकृत जावास्क्रिप्ट निष्पादन से बचाने के लिए शीर्ष 5 तकनीकें
• जावास्क्रिप्ट फ़ाइल मैनेजर में आसानी से फ्लैट JSON डेटा प्रस्तुत करें
• डेटामैनेजर का उपयोग करके जावास्क्रिप्ट नियंत्रणों को सहजता से सिंक्रनाइज़ करें
• उत्पादकता को अनुकूलित करना: सेल्सफोर्स को जावास्क्रिप्ट शेड्यूलर के साथ एकीकृत करें