نحوه تولید جدول از داده های JSON در React

بیاموزید که چگونه یک جزء React می تواند نشانه گذاری ایجاد کند و به داده ها در قالب JSON دسترسی پیدا کند.

یکی از ساده‌ترین راه‌ها برای جدا کردن داده‌ها از اسناد HTML ذخیره آن در JSON است. JSON محبوب است و کار با آن آسان است، به خصوص در جاوا اسکریپت.

در React، ارائه داده های JSON از طریق جداول با استفاده از یک جزء منطقی است. آن مولفه می‌تواند جدولی تولید کند که با داده‌های JSON مقیاس شود. جدول به دست آمده می تواند به تعداد مورد نیاز ردیف داشته باشد زیرا داده ها کدگذاری نشده اند.

آنچه شما نیاز دارید

برای دنبال کردن این آموزش و درک اولیه از نحوه عملکرد React، باید Node.js را روی دستگاه خود نصب کنید.

قبل از ایجاد جدول، اگر ندارید، باید یک پروژه React جدید ایجاد کنید.

ایجاد داده های JSON

جدول از داده های ذخیره شده در یک فایل JSON استفاده می کند. ممکن است این داده ها را از یک نقطه پایانی API در یک برنامه واقعی دریافت کنید.

در پوشه src یک فایل جدید به نام data.json ایجاد کنید و موارد زیر را اضافه کنید:

[{
    "id": 1,
    "first_name": "Ethelred",
    "last_name": "Slowly",
    "email": "eslowly0@google.es"
},{
    "id": 2,
    "first_name": "Reta",
    "last_name": "Woolmer",
    "email": "rwoolmer1@miibeian.gov.cn"
},{
    "id": 3,
    "first_name": "Arabel",
    "last_name": "Pestor",
    "email": "apestor2@bloglovin.com"
}]

این یک فایل JSON ساده است که شامل سه شی است.

کلیدهای شی – شناسه، نام، نام خانوادگی و ایمیل – سرفصل ها هستند، در حالی که ویژگی های متناظر آنها بدنه جدول را تشکیل می دهند.

ایجاد جزء جدول

یک فایل جدید به نام Table.js در پوشه src ایجاد کنید و کد زیر را اضافه کنید.

export default function Table({theadData, tbodyData}) {
  return (
    <table>
        <thead>
            <tr>
            // header row
            </tr>
        </thead>
        <tbody>
          // body data
        </tbody>
    </table>
  );
}

این کامپوننت theadData و tBodyData را به عنوان پایه می گیرد. theadData حاوی داده‌هایی است که در ردیف سرصفحه نمایش می‌دهید. برنامه این داده ها را از فایل JSON منبع می کند و آن را به جزء جدول تحویل می دهد.

یک تابع در App.js به نام getHeadings() ایجاد کنید و موارد زیر را اضافه کنید.

const getHeadings = () => {
    return Object.keys(data[0]);
}

از آنجایی که کلیدهای هر شیء در فایل JSON مشابه هستند، می توانید به سادگی از کلیدهای اولین شی استفاده کنید.

به یاد داشته باشید که data.json را در App.js وارد کنید.

import data from "./data.json"

هنگامی که مولفه Table را رندر می‌کنید، عنوان و داده‌های JSON را به عنوان پروپوزال ارسال کنید.

<Table theadData={getHeadings()} tbodyData={data}/> 

ایجاد ردیف سرصفحه

در این مرحله، یک کامپوننت برای رندر یک آیتم در ردیف سرصفحه ایجاد می کنید. این جزء با استفاده از متد map() روی سرفصل ها تکرار می شود.

در Table.js، کد را برای تکرار روی سرفصل های داخل تگ thead اضافه کنید.

<tr>
    {theadData.map(heading => {
         return <th key={heading}>{heading}</th>
    })}
</tr>

بعد، بدنه جدول را پر می کنید.

ایجاد ردیف های بدنه

بدنه جدول داده های ردیف را ارائه می کند. از آنجایی که Table.js داده‌ها را به صورت آرایه‌ای از اشیاء دریافت می‌کند، باید ابتدا روی آن تکرار کنید تا هر شی نشان دهنده یک ردیف باشد.

بنابراین، در Table.js، روی پایه tBodyData مانند این تکرار کنید:

<tbody>
  {tbodyData.map((row, index) => {
     return <tr key={index}>
        // row data
      </tr>;
  })}
</tbody>

هر شی ردیف شبیه به مثال شیء زیر خواهد بود.

const row = {
    "id": 1,
    "first_name": "Ethelred",
    "last_name": "Slowly",
    "email": "eslowly0@google.es"
}

برای نمایش هر یک از این موارد، باید روی کلیدهای شیء تکرار کنید. در هر تکرار، خاصیتی را که با آن کلید در شی ردیف مطابقت دارد، بازیابی خواهید کرد. از آنجایی که این کلیدها همانند سرفصل ها هستند، از مقادیر موجود در prop theadData استفاده کنید.

تگ tr را برای نمایش داده های ردیف مطابق شکل زیر تغییر دهید.

<tr key={index}>
   // theadData contains the keys
   {theadData.map((key, index) => {
     return <td key={row[key]}>{row[key]}</td>
   })}
</tr>;

با کنار هم قرار دادن همه چیز، جزء Table باید به شکل زیر باشد:

export default function Table({theadData, tbodyData}) {
 return (
   <table>
       <thead>
          <tr>
           {theadData.map(heading => {
             return <th key={heading}>{heading}</th>
           })}
         </tr>
       </thead>
       <tbody>
           {tbodyData.map((row, index) => {
               return <tr key={index}>
                   {theadData.map((key, index) => {
                        return <td key={row[key]}>{row[key]}</td>
                   })}
             </tr>;
           })}
       </tbody>
   </table>
);
}

در عنصر

، مؤلفه روی آرایه داده تکرار می شود و ردیف جدول را برای هر شی برمی گرداند.

استفاده از کامپوننت جدول

جدول را در App.js وارد کنید و آن را مطابق شکل زیر رندر کنید:

import Table from './Table';
import data from "./data.json"

function App() {
  const getHeadings = () => {
    return Object.keys(data[0]);
  }

  return (
    <div className="container">
      <Table theadData={getHeadings()} tbodyData={data}/>
    </div>
  );
}
export default App;

جزء جدول theadData و tbodyData را به عنوان props می گیرد. theadData شامل سرفصل‌های تولید شده از کلیدهای اولین مورد در داده‌های JSON است و tbodyData شامل کل فایل JSON است.

یک ظاهر طراحی با ماژول های CSS

شما یک جزء جدول React را از یک فایل JSON در این آموزش ایجاد کردید. همچنین یاد گرفتید که چگونه می توانید داده های JSON را مطابق با نیازهای خود دستکاری کنید. شما می توانید ظاهر جدول خود را با افزودن مقداری CSS به آن بهبود بخشید. برای ایجاد سبک های CSS با محدوده محلی، استفاده از ماژول های CSS را در نظر بگیرید. اگر از یک برنامه Create-React-app استفاده می کنید، استفاده از آن ساده است و شروع به کار با آن آسان است.

منبع مقاله