כיצד ליצור טבלה מנתוני JSON ב-React

אחת הדרכים הפשוטות ביותר להפריד נתונים ממסמכי ה-HTML שלך היא לאחסן אותם ב-JSON. JSON פופולרי וקל לעבוד איתו, במיוחד ב-JavaScript.

ב-React, הגיוני להגיש נתוני JSON באמצעות טבלאות באמצעות רכיב. רכיב זה יוכל ליצור טבלה המותאמת לנתוני JSON. הטבלה המתקבלת יכולה לכלול כמה שורות שהיא צריכה מכיוון שהנתונים אינם מקודדים.

מה שאתה תצטרך

תזדקק ל-Node.js להתקין במחשב שלך כדי לעקוב אחר הדרכה זו והבנה בסיסית של אופן הפעולה של React.

לפני יצירת הטבלה, תצטרך ליצור פרויקט React חדש אם אין לך אחד.

יצירת נתוני JSON

הטבלה תשתמש בנתונים המאוחסנים בקובץ JSON. אתה עלול אחזר את הנתונים האלה מנקודת קצה של API באפליקציה מהחיים האמיתיים.

בתיקיית src, צור קובץ חדש בשם data.json והוסיפו את הדברים הבאים:

[{
"תְעוּדַת זֶהוּת": 1,
"שם פרטי": "אתלרד",
"שם משפחה": "לאט",
"אימייל": "[email protected]"
},{
"תְעוּדַת זֶהוּת": 2,
"שם פרטי": "רטה",
"שם משפחה": "וולמר",
"אימייל": "[email protected]"
},{
"תְעוּדַת זֶהוּת": 3,
"שם פרטי": "ארבל",
"שם משפחה": "פסטר",
"אימייל": "[email protected]"
}]

זהו קובץ JSON פשוט המכיל שלושה אובייקטים.

מפתחות האובייקט - המזהה, השם הפרטי, שם המשפחה והמייל - הם הכותרות, בעוד המאפיינים התואמים שלהם מרכיבים את גוף הטבלה.

יצירת רכיב הטבלה

צור קובץ חדש בשם Table.js בתיקיית src והוסיפו את הקוד הבא.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהשולחן({theadData, tbodyData}) {
לַחֲזוֹר (
<שולחן>
<תד>
<tr>
// שורת הכותרת
</tr>
</thead>
<הגוף>
// נתוני גוף
</tbody>
</table>
 );
}

רכיב זה לוקח את theadData ו-tBodyData בתור אביזרים. theadData מכיל את הנתונים שתציג בשורת הכותרת. האפליקציה תביא את הנתונים האלה מקובץ JSON ותעביר אותם לרכיב הטבלה.

צור פונקציה ב App.js קראו getHeadings() והוסיפו את הדברים הבאים.

const getHeadings = () => {
לַחֲזוֹרלְהִתְנַגֵד‎.keys (נתונים[0]);
}

מכיוון שהמפתחות עבור כל אובייקט בקובץ JSON דומים, אתה יכול פשוט להשתמש במפתחות מהאובייקט הראשון.

זכור לייבא את data.json ב-App.js.

יְבוּא נתונים מ "./data.json"

כשאתה מעבד את רכיב הטבלה, העבר את הכותרת ואת נתוני ה-JSON כאביזרים.

<טבלה theadData={getHeadings()} tbodyData={data}/>

יצירת שורת הכותרת

בשלב זה, תיצור רכיב לעיבוד פריט בשורת הכותרת. רכיב זה יחזור על הכותרות באמצעות שיטת map() .

ב-Table.js, הוסף את הקוד כדי לחזור על הכותרות בתוך תג thead.

<tr>
 {theadData.map (heading => {
 לַחֲזוֹר <מקש ה'={heading}>{כּוֹתֶרֶת}</th>
 })}
</tr>

לאחר מכן, תאכלס את גוף הטבלה.

יצירת שורות הגוף

גוף הטבלה מציג את נתוני השורה. מכיוון ש-Table.js מקבל את הנתונים כמערך של אובייקטים, תצטרך לעבור עליהם תחילה כדי לקבל כל אובייקט המייצג שורה.

אז, ב-Table.js, חזרו על אבזר tBodyData כך:

<הגוף>
 {tbodyData.map((שורה, אינדקס) => {
 לַחֲזוֹר <tr key={index}>
// נתוני שורה
</tr>;
 })}
</tbody>

כל אובייקט שורה יהיה דומה לדוגמא האובייקט למטה.

const שורה = {
"תְעוּדַת זֶהוּת": 1,
"שם פרטי": "אתלרד",
"שם משפחה": "לאט",
"אימייל": "[email protected]"
}

כדי להציג כל אחד מהפריטים הללו, תצטרך לעבור על המקשים של האובייקט. בכל איטרציה, תשלוף את המאפיין שתואם את המפתח הזה באובייקט השורה. מכיוון שהמפתחות האלה זהים לכותרות, השתמש בערכים מ-theadData prop.

שנה את תג tr כדי להציג את נתוני השורה כפי שמוצג להלן.

<tr key={index}>
// theadData מכיל את המפתחות
 {theadData.map((key, index) => {
 לַחֲזוֹר <td key={שורה[מפתח]}>{שורה[מפתח]}</td>
 })}
</tr>;

אם נחבר הכל יחד, רכיב הטבלה אמור להיראות כך:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהשולחן({theadData, tbodyData}) {
לַחֲזוֹר (
<שולחן>
<תד>
<tr>
 {theadData.map (heading => {
 לַחֲזוֹר <מקש ה'={heading}>{כּוֹתֶרֶת}</th>
 })}
</tr>
</thead>
<הגוף>
 {tbodyData.map((שורה, אינדקס) => {
 לַחֲזוֹר <tr key={index}>
 {theadData.map((key, index) => {
 לַחֲזוֹר <td key={שורה[מפתח]}>{שורה[מפתח]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

בתוך ה

אלמנט, הרכיב חוזר על מערך הנתונים ומחזיר את שורת הטבלה עבור כל אובייקט.

שימוש ברכיב הטבלה

ייבא טבלה ב-App.js ועבד אותה כפי שמוצג להלן:

יְבוּא שולחן מ './שולחן';
יְבוּא נתונים מ "./data.json"
פוּנקצִיָהאפליקציה() {
const getHeadings = () => {
לַחֲזוֹרלְהִתְנַגֵד‎.keys (נתונים[0]);
 }
לַחֲזוֹר (
<div className="מְכוֹלָה">
<טבלה theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

רכיב הטבלה לוקח את theadData ו-tbodyData בתור אביזרים. theadData מכיל את הכותרות שנוצרו מהמפתחות של הפריט הראשון בנתוני JSON, ו-tbodyData מכיל את כל קובץ ה-JSON.

סטיילינג עם מודולי CSS

יצרת רכיב טבלת React מקובץ JSON במדריך זה. למדת גם איך אתה יכול לתפעל את נתוני JSON כך שיתאימו לצרכים שלך. אתה יכול לשפר את המראה של הטבלה שלך על ידי הוספת CSS אליו. כדי ליצור סגנונות CSS בהיקף מקומי, שקול להשתמש במודולי CSS. זה פשוט לשימוש וקל להתחיל איתו אם אתה משתמש באפליקציית יצירה-להגיב-אפליקציה.