कैसे प्रतिक्रिया में JSON डेटा से एक तालिका उत्पन्न करने के लिए?

अपने HTML दस्तावेज़ों से डेटा को अलग करने के सबसे सरल तरीकों में से एक इसे JSON में संग्रहीत करना है। JSON लोकप्रिय है और इसके साथ काम करना आसान है, खासकर जावास्क्रिप्ट में।

रिएक्ट में, एक घटक का उपयोग करके तालिकाओं के माध्यम से JSON डेटा की सेवा करना समझ में आता है। वह घटक JSON डेटा के साथ एक तालिका उत्पन्न करने में सक्षम होगा। परिणामी तालिका में जितनी आवश्यकता हो उतनी पंक्तियाँ हो सकती हैं क्योंकि डेटा हार्ड-कोडेड नहीं है।

तुम क्या आवश्यकता होगी

इस ट्यूटोरियल का पालन करने और रिएक्ट कैसे काम करता है, इसकी बुनियादी समझ के लिए आपको अपनी मशीन पर Node.js स्थापित करने की आवश्यकता होगी।

तालिका बनाने से पहले, आपको करने की आवश्यकता होगी एक नया रिएक्ट प्रोजेक्ट बनाएं यदि आपके पास एक नहीं है।

JSON डेटा बनाना

तालिका JSON फ़ाइल में संग्रहीत डेटा का उपयोग करेगी। आप शायद इस डेटा को एपीआई एंडपॉइंट से प्राप्त करें एक वास्तविक जीवन के आवेदन में।

src फोल्डर में, एक नई फाइल बनाएं, जिसका नाम है डेटा.जेसन और निम्नलिखित जोड़ें:

[{
"पहचान": 1,
"संतोष": "एथेल्रेड",
"उपनाम": "धीरे से",
"ईमेल": "[email protected]"
},{
"पहचान

instagram viewer

": 2,
"संतोष": "rēta",
"उपनाम": "वूल्मर",
"ईमेल": "[email protected]"
},{
"पहचान": 3,
"संतोष": "अरबेली",
"उपनाम": "पेस्टोर",
"ईमेल": "[email protected]"
}]

यह एक साधारण JSON फ़ाइल है जिसमें तीन ऑब्जेक्ट हैं।

ऑब्जेक्ट कुंजियाँ—आईडी, प्रथम नाम, उपनाम और ईमेल—शीर्षक हैं, जबकि उनके संगत गुण तालिका का मुख्य भाग बनाते हैं।

तालिका घटक बनाना

नामक एक नई फ़ाइल बनाएँ टेबल.जेएस src फ़ोल्डर में और निम्न कोड जोड़ें।

निर्यात करनाचूकसमारोहमेज({थेडडाटा, टबॉडीडाटा}) {
वापसी (
<मेज़>
<ठेड>
<टीआर>
// शीर्ष पंक्ति
</tr>
</thead>
<तबॉडी>
// शरीर डेटा
</tbody>
</table>
 );
}

यह घटक theadData और tBodyData को सहारा के रूप में लेता है। theadData में वह डेटा होता है जिसे आप शीर्षलेख पंक्ति में प्रदर्शित करेंगे। ऐप इस डेटा को JSON फाइल से सोर्स करेगा और इसे टेबल कंपोनेंट को सौंप देगा।

में एक समारोह बनाएँ ऐप.जेएस getHeadings() कहा जाता है और निम्नलिखित जोड़ें।

स्थिरांक गेटहेडिंग्स = () => {
वापसीवस्तु.कुंजी (डेटा [0]);
}

चूंकि JSON फ़ाइल में प्रत्येक ऑब्जेक्ट की कुंजियाँ समान हैं, आप बस पहली वस्तु से कुंजियों का उपयोग कर सकते हैं।

App.js में data.json आयात करना याद रखें।

आयात जानकारी से "./data.json"

जब आप तालिका घटक प्रस्तुत करते हैं, तो शीर्षक और JSON डेटा को सहारा के रूप में पास करें।

<तालिका theadData={getHeadings()} tbodyData={data}/>

हैडर रो बनाना

इस चरण में, आप शीर्ष लेख पंक्ति में किसी आइटम को प्रस्तुत करने के लिए एक घटक बनाएंगे। यह घटक मानचित्र () पद्धति का उपयोग करके शीर्षकों पर पुनरावृति करेगा।

Table.js में, थैड टैग के अंदर शीर्षकों पर पुनरावृति करने के लिए कोड जोड़ें।

<टीआर>
 {theadData.map (शीर्षक => {
 वापसी <वें कुंजी = {शीर्षक}>{शीर्षक}</th>
 })}
</tr>

इसके बाद, आप टेबल की बॉडी को पॉप्युलेट करेंगे।

बॉडी रो बनाना

तालिका निकाय पंक्ति डेटा प्रस्तुत करता है। चूंकि Table.js डेटा को ऑब्जेक्ट की एक सरणी के रूप में प्राप्त करता है, इसलिए आपको प्रत्येक ऑब्जेक्ट को एक पंक्ति का प्रतिनिधित्व करने के लिए पहले उस पर पुनरावृति करने की आवश्यकता होगी।

तो, Table.js में, इस तरह tBodyData प्रोप पर पुनरावृति करें:

<तबॉडी>
 {tbodyData.map((पंक्ति, अनुक्रमणिका) => {
 वापसी <tr कुंजी = {सूचकांक}>
// पंक्ति डेटा
</tr>;
 })}
</tbody>

प्रत्येक पंक्ति वस्तु नीचे दिए गए वस्तु उदाहरण के समान होगी।

स्थिरांक पंक्ति = {
"पहचान": 1,
"संतोष": "एथेल्रेड",
"उपनाम": "धीरे से",
"ईमेल": "[email protected]"
}

इनमें से प्रत्येक आइटम को प्रदर्शित करने के लिए, आपको ऑब्जेक्ट की कुंजियों पर पुनरावृति करने की आवश्यकता होगी। प्रत्येक पुनरावृत्ति में, आप उस संपत्ति को पुनः प्राप्त करेंगे जो पंक्ति वस्तु में उस कुंजी से मेल खाती है। चूँकि ये कुंजियाँ शीर्षकों के समान हैं, इसलिए theadData प्रोप के मानों का उपयोग करें।

नीचे दिखाए गए अनुसार पंक्ति डेटा प्रदर्शित करने के लिए tr टैग को संशोधित करें।

<tr कुंजी = {सूचकांक}>
// theadData में कुंजियाँ होती हैं
 {theadData.map((कुंजी, अनुक्रमणिका) => {
 वापसी <टीडी कुंजी = {पंक्ति [कुंजी]}>{पंक्ति [कुंजी]}</td>
 })}
</tr>;

सब कुछ एक साथ लाना, तालिका घटक इस तरह दिखना चाहिए:

निर्यात करनाचूकसमारोहमेज({थेडडाटा, टबॉडीडाटा}) {
वापसी (
<मेज़>
<ठेड>
<टीआर>
 {theadData.map (शीर्षक => {
 वापसी <वें कुंजी = {शीर्षक}>{शीर्षक}</th>
 })}
</tr>
</thead>
<तबॉडी>
 {tbodyData.map((पंक्ति, अनुक्रमणिका) => {
 वापसी <tr कुंजी = {सूचकांक}>
 {theadData.map((कुंजी, अनुक्रमणिका) => {
 वापसी <टीडी कुंजी = {पंक्ति [कुंजी]}>{पंक्ति [कुंजी]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

में

तत्व, घटक डेटा सरणी पर पुनरावृति करता है और प्रत्येक ऑब्जेक्ट के लिए तालिका पंक्ति देता है।

तालिका घटक का उपयोग करना

App.js में तालिका आयात करें और इसे नीचे दिखाए अनुसार प्रस्तुत करें:

आयात मेज से '।/मेज';
आयात जानकारी से "./data.json"
समारोहअनुप्रयोग() {
स्थिरांक गेटहेडिंग्स = () => {
वापसीवस्तु.कुंजी (डेटा [0]);
 }
वापसी (
<div वर्गनाम="पात्र">
<तालिका theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

तालिका घटक theadData और tbodyData को सहारा के रूप में लेता है। theadData में JSON डेटा में पहले आइटम की कुंजियों से उत्पन्न शीर्षक होते हैं, और tbodyData में संपूर्ण JSON फ़ाइल होती है।

CSS मॉड्यूल के साथ स्टाइलिंग

आपने इस ट्यूटोरियल में JSON फ़ाइल से एक रिएक्ट टेबल कंपोनेंट जेनरेट किया है। आपने यह भी सीखा कि आप अपनी आवश्यकताओं के अनुरूप JSON डेटा में हेरफेर कैसे कर सकते हैं। आप इसमें कुछ CSS जोड़कर अपनी तालिका के रूप में सुधार कर सकते हैं। स्थानीय रूप से दायरे वाली CSS शैलियाँ बनाने के लिए, CSS मॉड्यूल का उपयोग करने पर विचार करें। यदि आप क्रिएट-रिएक्शन-ऐप एप्लिकेशन का उपयोग कर रहे हैं तो इसका उपयोग करना आसान है और इसे शुरू करना आसान है।