रिएक्ट कंपोनेंट में नेस्टेड ऐरे पर मैप कैसे करें

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

मानचित्र समारोह का उपयोग करना

नक्शा फ़ंक्शन किसी दिए गए सरणी के आइटम पर लूप करता है और प्रत्येक के लिए निर्दिष्ट कथन या कोड देता है।

एक फ्लैट सरणी के लिए, नक्शा फ़ंक्शन निम्नानुसार कार्य करता है:

स्थिरांक आगमन = ['ए', 'बी', 'सी'];
कॉन्स्ट परिणाम 1 = arr.map (तत्व => {
वापस करना तत्व;
});

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

स्थिरांक आगमन = ['ए', 'बी', 'सी']; 
समारोहअनुप्रयोग () {
वापस करना (
<>
 {arr.map ((आइटम, इंडेक्स) => {
<स्पैन की = {इंडेक्स}>{ए}</span>
 })}
</>
	)
}

ध्यान दें कि आप मानचित्र फ़ंक्शन द्वारा लौटाए जाने वाले प्रत्येक तत्व के लिए एक कुंजी निर्दिष्ट करते हैं। यह रिएक्ट को उन आइटम्स की पहचान करने में मदद करता है जिन्हें बदल दिया गया है या हटा दिया गया है। यह सुलह प्रक्रिया के दौरान महत्वपूर्ण है।

रिएक्ट कंपोनेंट में नेस्टेड ऐरे पर मैपिंग

एक नेस्टेड सरणी एक सरणी के समान होती है जिसमें एक और सरणी होती है। उदाहरण के लिए, निम्न नुस्खा सरणी में सरणी वाला ऑब्जेक्ट होता है।

कॉन्स्ट व्यंजन विधि = [
 {
 आईडी: 716429,
 शीर्षक: "लहसुन, शल्क, फूलगोभी के साथ पास्ता & ब्रेडक्रम्ब्स",
 छवि: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 व्यंजन प्रकार: [
"दिन का खाना",
"मेन कोर्स",
"मुख्य पकवान",
"रात का खाना"
 ],
 व्यंजन विधि: {
// नुस्खा डेटा
 }
 }
]

नेस्टेड सरणियों के साथ इस तरह के डेटा के लिए, आपको प्रत्येक सरणी के लिए मैप फ़ंक्शन का उपयोग करना चाहिए।

इस उदाहरण में, आप नीचे दिखाए गए अनुसार डेटा ऐरे पर मैप करेंगे:

निर्यातगलती करनासमारोहव्यंजनों() {
वापस करना (
<डिव>
 {रेसिपी.मैप ((रेसिपी) => {
 वापस करना <div कुंजी = {नुस्खा.आईडी}>
<एच 1>{रेसिपी.टाइटल}</h1>
<img src={recipe.image} alt="नुस्खा छवि" />
 {रेसिपी.डिशटाइप्स.मैप((टाइप, इंडेक्स) => {
 वापस करना <स्पैन की = {इंडेक्स}>{प्रकार}</span>
 })}
</div>
 })}
</div>
 )
}

रेसिपी घटक इसे रेंडर करेगा डिव रेसिपी सरणी में प्रत्येक रेसिपी के लिए रेसिपी डेटा वाला तत्व।

जावास्क्रिप्ट में सरणियों के साथ कार्य करना

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