واکشی داده - دریافت اطلاعات کاربران از لینک - api با استفاده از بوت استرپ و نمایش به صورت کارت و مودال


تصور کنید از یک آدرس میخواهیم اطلاعات کاربران را فتچ fetch یا واکشی کنیم.

{
  &quotpage&quot: 1,
  &quotper_page&quot: 6,
  &quottotal&quot: 12,
  &quottotal_pages&quot: 2,
  &quotdata&quot: [
    {
      &quotid&quot: 1,
      &quotemail&quot: &quotgeorge.bluth@reqres.in&quot,
      &quotfirst_name&quot: &quotGeorge&quot,
      &quotlast_name&quot: &quotBluth&quot,
      &quotavatar&quot: &quothttps://reqres.in/img/faces/1-image.jpg&quot
    },
    {
      &quotid&quot: 2,
      &quotemail&quot: &quotjanet.weaver@reqres.in&quot,
      &quotfirst_name&quot: &quotJanet&quot,
      &quotlast_name&quot: &quotWeaver&quot,
      &quotavatar&quot: &quothttps://reqres.in/img/faces/2-image.jpg&quot
    },
    {
      &quotid&quot: 3,
      &quotemail&quot: &quotemma.wong@reqres.in&quot,
      &quotfirst_name&quot: &quotEmma&quot,
      &quotlast_name&quot: &quotWong&quot,
      &quotavatar&quot: &quothttps://reqres.in/img/faces/3-image.jpg&quot
    },
    {
      &quotid&quot: 4,
      &quotemail&quot: &quoteve.holt@reqres.in&quot,
      &quotfirst_name&quot: &quotEve&quot,
      &quotlast_name&quot: &quotHolt&quot,
      &quotavatar&quot: &quothttps://reqres.in/img/faces/4-image.jpg&quot
    },
    {
      &quotid&quot: 5,
      &quotemail&quot: &quotcharles.morris@reqres.in&quot,
      &quotfirst_name&quot: &quotCharles&quot,
      &quotlast_name&quot: &quotMorris&quot,
      &quotavatar&quot: &quothttps://reqres.in/img/faces/5-image.jpg&quot
    },
    {
      &quotid&quot: 6,
      &quotemail&quot: &quottracey.ramos@reqres.in&quot,
      &quotfirst_name&quot: &quotTracey&quot,
      &quotlast_name&quot: &quotRamos&quot,
      &quotavatar&quot: &quothttps://reqres.in/img/faces/6-image.jpg&quot
    }
  ],
  &quotsupport&quot: {
    &quoturl&quot: &quothttps://reqres.in/#support-heading&quot,
    &quottext&quot: &quotTo keep ReqRes free, contributions towards server costs are appreciated!&quot
  }
}

در بالا اطلاعات کاربران را ملاحظه میکنیم.

ادرس این api:
https://reqres.in/api/users

برای نمایش این اطلاعات میخواهیم از بوت استرپ برای استایل دهی و از جاوا اسکریپت برای واکشی اطلاعات استفاده کنیم:

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
    <meta charset=&quotUTF-8&quot>
    <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
    <title>User Management</title>
    <!-- Bootstrap CSS -->
    <link href=&quothttps://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css&quot rel=&quotstylesheet&quot integrity=&quotsha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH&quot crossorigin=&quotanonymous&quot>
    <style>
        .user-card {
            cursor: pointer;
        }
        .card-img-top {
            width: 100%;
            height: 15vw;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class=&quotcontainer mt-5&quot>
        <h1 class=&quottext-center mb-4&quot>User List</h1>
        <div class=&quotrow&quot id=&quotuser-list&quot>
            <!-- User cards will be inserted here -->
        </div>
        <button class=&quotbtn btn-primary mt-4&quot data-toggle=&quotmodal&quot data-target=&quot#addUserModal&quot>Add User</button>
    </div>

    <!-- User Modal -->
    <div class=&quotmodal fade&quot id=&quotuserModal&quot tabindex=&quot-1&quot role=&quotdialog&quot aria-labelledby=&quotuserModalLabel&quot aria-hidden=&quottrue&quot>
        <div class=&quotmodal-dialog&quot role=&quotdocument&quot>
            <div class=&quotmodal-content&quot>
                <div class=&quotmodal-header&quot>
                    <h5 class=&quotmodal-title&quot id=&quotuserModalLabel&quot>User Details</h5>
                    <button type=&quotbutton&quot class=&quotclose&quot data-dismiss=&quotmodal&quot aria-label=&quotClose&quot>
                        <span aria-hidden=&quottrue&quot>×</span>
                    </button>
                </div>
                <div class=&quotmodal-body&quot>
                    <img id=&quotmodal-avatar&quot src=&quot&quot alt=&quotUser Avatar&quot class=&quotimg-fluid mb-3&quot>
                    <h4 id=&quotmodal-name&quot></h4>
                    <p id=&quotmodal-email&quot></p>
                    <button class=&quotbtn btn-primary&quot id=&quotedit-user-btn&quot>Edit User</button>
                    
                    <!-- Edit User Form -->
                    <form id=&quotedit-user-form&quot class=&quotmt-3&quot style=&quotdisplay: none;&quot>
                        <div class=&quotform-group&quot>
                            <label for=&quotedit-first-name&quot>First Name</label>
                            <input type=&quottext&quot class=&quotform-control&quot id=&quotedit-first-name&quot required>
                        </div>
                        <div class=&quotform-group&quot>
                            <label for=&quotedit-last-name&quot>Last Name</label>
                            <input type=&quottext&quot class=&quotform-control&quot id=&quotedit-last-name&quot required>
                        </div>
                        <div class=&quotform-group&quot>
                            <label for=&quotedit-email&quot>Email</label>
                            <input type=&quotemail&quot class=&quotform-control&quot id=&quotedit-email&quot required>
                        </div>
                        <div class=&quotform-group&quot>
                            <label for=&quotedit-avatar-url&quot>Avatar URL</label>
                            <input type=&quoturl&quot class=&quotform-control&quot id=&quotedit-avatar-url&quot required>
                        </div>
                        <button type=&quotsubmit&quot class=&quotbtn btn-success&quot>Save Changes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Add User Modal -->
    <div class=&quotmodal fade&quot id=&quotaddUserModal&quot tabindex=&quot-1&quot role=&quotdialog&quot aria-labelledby=&quotaddUserModalLabel&quot aria-hidden=&quottrue&quot>
        <div class=&quotmodal-dialog&quot role=&quotdocument&quot>
            <div class=&quotmodal-content&quot>
                <div class=&quotmodal-header&quot>
                    <h5 class=&quotmodal-title&quot id=&quotaddUserModalLabel&quot>Add New User</h5>
                    <button type=&quotbutton&quot class=&quotclose&quot data-dismiss=&quotmodal&quot aria-label=&quotClose&quot>
                        <span aria-hidden=&quottrue&quot>×</span>
                    </button>
                </div>
                <div class=&quotmodal-body&quot>
                    <form id=&quotadd-user-form&quot>
                        <div class=&quotform-group&quot>
                            <label for=&quotfirst-name&quot>First Name</label>
                            <input type=&quottext&quot class=&quotform-control&quot id=&quotfirst-name&quot required>
                        </div>
                        <div class=&quotform-group&quot>
                            <label for=&quotlast-name&quot>Last Name</label>
                            <input type=&quottext&quot class=&quotform-control&quot id=&quotlast-name&quot required>
                        </div>
                        <div class=&quotform-group&quot>
                            <label for=&quotemail&quot>Email</label>
                            <input type=&quotemail&quot class=&quotform-control&quot id=&quotemail&quot required>
                        </div>
                        <div class=&quotform-group&quot>
                            <label for=&quotavatar-url&quot>Avatar URL</label>
                            <input type=&quoturl&quot class=&quotform-control&quot id=&quotavatar-url&quot required>
                        </div>
                        <button type=&quotsubmit&quot class=&quotbtn btn-success&quot>Add User</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS, Popper.js, and Vanilla JavaScript -->
    <script src=&quothttps://code.jquery.com/jquery-3.5.1.min.js&quot>
    <script src=&quothttps://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js&quot>
    <script src=&quothttps://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot>

    
        document.addEventListener('DOMContentLoaded', () => {
            let currentUserId = null;

            // Fetch users from the API
            fetch('https://reqres.in/api/users')
                .then(response => response.json())
                .then(data => {
                    const users = data.data;
                    const userList = document.getElementById('user-list');

                    users.forEach(user => {
                        const userCard = document.createElement('div');
                        userCard.className = 'col-md-4 mb-4';

                        userCard = `
                            <div class=&quotcard user-card&quot data-id=&quot${user.id}&quot>
                                <img src=&quot${user.avatar}&quot class=&quotcard-img-top&quot alt=&quot${user.first_name} ${user.last_name}&quot>
                                <div class=&quotcard-body&quot>
                                    <h5 class=&quotcard-title&quot>${user.first_name} ${user.last_name}</h5>
                                    <p class=&quotcard-text&quot>${user.email}</p>
                                </div>
                            </div>
                        `;

                        userList(userCard);

                        // Add click event to open user details in a modal
                        userCard.querySelector('.user-card').addEventListener('click', () => {
                            currentUserId = user.id;
                            document.getElementById('modal-avatar').src = user.avatar;
                            document.getElementById('modal-name').textContent = `${user.first_name} ${user.last_name}`;
                            document.getElementById('modal-email').textContent = user.email;

                            // Pre-fill the edit form with user data
                            document.getElementById('edit-first-name').value = user.first_name;
                            document.getElementById('edit-last-name').value = user.last_name;
                            document.getElementById('edit-email').value = user.email;
                            document.getElementById('edit-avatar-url').value = user.avatar;

                            document.getElementById('edit-user-form').style.display = 'none';
                            document.getElementById('edit-user-btn').style.display = 'block';
                            $('#userModal').modal('show');
                        });
                    });
                });

            // Show edit form on &quotEdit User&quot button click
            document.getElementById('edit-user-btn').addEventListener('click', () => {
                document.getElementById('edit-user-btn').style.display = 'none';
                document.getElementById('edit-user-form').style.display = 'block';
            });

            // Handle edit form submission
            document.getElementById('edit-user-form').addEventListener('submit', (event) => {
                event.preventDefault();
                const updatedUser = {
                    first_name: document.getElementById('edit-first-name').value,
                    last_name: document.getElementById('edit-last-name').value,
                    email: document.getElementById('edit-email').value,
                    avatar: document.getElementById('edit-avatar-url').value
                };

                // Send PUT request to update the user (mock)
                fetch(`https://reqres.in/api/users/${currentUserId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(updatedUser)
                })
                .then(response => response.json())
                .then(data => {
                    alert('User updated successfully!');
                    $('#userModal').modal('hide');
                })
                .catch(error => {
                    console.error('Error updating user:', error);
                });
            });

            // Add new user
            document.getElementById('add-user-form').addEventListener('submit', (event) => {
                event.preventDefault();
                const newUser = {
                    first_name: document.getElementById('first-name').value,
                    last_name: document.getElementById('last-name').value,
                    email: document.getElementById('email').value,
                    avatar: document.getElementById('avatar-url').value
                };

                // Send POST request to add new user (Note: reqres.in won't actually add a user, it's for testing only)
                fetch('https://reqres.in/api/users', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(newUser)
                })
                .then(response => response.json())
                .then(data => {
                    alert('User added successfully!');
                    $('#addUserModal').modal('hide');
                })
                .catch(error => {
                    console.error('Error adding user:', error);
                });
            });
        });
    
</body>
</html>

برای مشاهده کد و نتیجه آن در کدپن اینجا کلیک کنید:

https://codepen.io/seyedahmaddv/pen/xxoraag

توضیحات جزئیات کد:

  1. document.addEventListener('DOMContentLoaded', ...):
    این رویداد زمانی که محتوای DOM به طور کامل بارگذاری شده باشد، فراخوانی میشود. به این ترتیب مطمئن میشویم که اسکریپتها پس از بارگذاری عناصر HTML اجرا میشوند.
  2. واکنش به fetch:
    تابع fetch برای دریافت دادهها از API استفاده میشود. این تابع یک پرامیس برمیگرداند که میتوانیم با استفاده از then و catch نتایج یا خطاها را مدیریت کنیم.
    response.json() دادههای JSON را از پاسخ HTTP به آبجکت تبدیل میکند.
  3. تولید کارتهای کاربر:
    به ازای هر کاربر، یک عنصر div با کلاس card ساخته میشود و اطلاعات کاربر در قالب HTML قرار میگیرد. سپس این کارت به user-list که در DOM وجود دارد اضافه میشود.
  4. اضافه کردن رویداد کلیک به کارتها:
    به هر کارت یک رویداد click اضافه میکنیم که با کلیک بر روی آن، مودال باز شده و اطلاعات کاربر در مودال نمایش داده شود. برای این کار از ویژگی data-id استفاده میشود تا ID کاربر در دسترس باشد.
  5. مدیریت مودالها:
    از $('#userModal').modal('show'); برای نمایش مودال استفاده میشود. این روش با استفاده از بوت استرپ و جی کوئری پیادهسازی شده است.
    درون مودال، فرمی برای ویرایش اطلاعات کاربر وجود دارد که با کلیک بر روی دکمه "Edit User" نمایش داده میشود.
  6. ارسال درخواستهای AJAX برای ویرایش یا اضافه کردن کاربر:
    از متدfetch برای ارسال درخواستهای PUT و POST به API استفاده میشود. درخواستهای PUT برای بهروزرسانی اطلاعات کاربر و درخواستهای POST برای اضافه کردن کاربر جدید هستند.
    در هر دو مورد، پس از موفقیت آمیز بودن عملیات، مودال بسته میشود و یک پیام هشدار نمایش داده میشود.



چگونه کد بنویسیم:

  • شروع با طرحبندی HTML و CSS:
    ابتدا طرحبندی صفحه را با استفاده از HTML و CSS پیادهسازی کنید. ساختار پایه شامل بخش نمایش کاربران و دکمه برای اضافه کردن کاربر جدید است.
  • افزودن رویدادهای جاوااسکریپت:
    از document.addEventListener('DOMContentLoaded', ...) برای اطمینان از بارگذاری کامل صفحه استفاده کنید.
    با استفاده از fetch دادهها را از API دریافت کنید و کارتهای کاربر را با استفاده از document.createElement بسازید.
  • استفاده از توابع برای جداسازی منطق:
    سعی کنید از توابع جداگانه برای وظایف مختلف مانند ساخت کارت کاربر، باز کردن مودال، ارسال درخواست AJAX و غیره استفاده کنید.
  • مدیریت وضعیت:
    از متغیرهایی مانند currentUserId برای نگهداری اطلاعات وضعیت مانند کاربر جاری استفاده کنید تا هنگام تعامل با API به راحتی به آنها دسترسی داشته باشید.



مقدار 'col-md-4 mb-4' در کد HTML که استفاده کردیم، مربوط به کلاسهایی از فریمورک CSS بوت استرپ است که برای استایل دهی و چیدمان عناصر در صفحه به کار میرود. بیایید هر یک از این کلاسها را بررسی کنیم:

توضیح کلاسها

  1. col-md-4:
    Grid System:
    بوت استرپ از یک سیستم شبکه (Grid) برای چیدمان صفحه استفاده میکند. این سیستم شامل 12 ستون است که میتوان با استفاده از کلاسهای CSS اندازه ستونها را تعیین کرد.
    col: نشان دهنده ی یک ستون در سیستم شبکه بوت استرپ است.
    md: مخفف "medium" است و به اندازه صفحه نمایش اشاره دارد. در بوت استرپ، اندازه های مختلفی برای دستگاههای مختلف تعریف شده اند که عبارتند از:xs: برای دستگاههای کوچکتر از 576 پیکسل
    sm: برای دستگاههای بزرگتر از 576 پیکسل
    md: برای دستگاههای بزرگتر از 768 پیکسل
    lg: برای دستگاههای بزرگتر از 992 پیکسل
    xl: برای دستگاههای بزرگتر از 1200 پیکسل

    4: نشان دهنده ی تعداد ستونهایی است که این عنصر باید در سیستم شبکه اشغال کند. از آنجا که سیستم بوت استرپ 12 ستون دارد، مقدار 4 به این معناست که هر عنصر به اندازه یک سوم از کل عرض صفحه را در دستگاههای متوسط و بالاتر (یعنی بزرگتر از 768 پیکسل) اشغال میکند.
  2. mb-4:
    m: نشان دهنده ی "margin" یا حاشیه است.
    b: مخفف "bottom" است و به معنای حاشیه در پایین عنصر میباشد.
    4: نشان دهنده ی مقدار حاشیه ای است که باید در پایین عنصر اعمال شود. بوت استرپ دارای یک سیستم اندازه گیری است که از 0 تا 5 برای حاشیهها و فاصلهها استفاده میکند، که به ترتیب به ترتیب به هیچ فاصلهای تا بیشترین فاصله اعمال شده اشاره دارد.

کاربرد

کلاسهای بوتاسترپ به ما این امکان را میدهند تا بدون نیاز به نوشتن CSS سفارشی، به راحتی و با سرعت بیشتری عناصر صفحه را چیدمان کنیم و به آنها استایل دهیم. در این مثال، این کلاسها به ما کمک میکنند تا کارتهای کاربر به صورت سهتایی در یک ردیف چیده شوند و هر کارت دارای یک حاشیه مناسب در پایین باشد تا فاصله مناسبی بین کارتها ایجاد شود.

استفاده از این کلاسها موجب میشود که صفحه در دستگاههای مختلف به خوبی واکنشگرا باشد و تجربه کاربری بهتری را فراهم کند.



در جاوااسکریپت، خط userList(userCard); برای اضافه کردن یک عنصر جدید به داخل یک عنصر والد در ساختار DOM (Document Object Model) استفاده میشود. این خط به طور خاص عنصر userCard را به عنوان یک فرزند به داخل عنصر userList اضافه میکند. بیایید به طور دقیقتر ببینیم که این خط چگونه کار میکند و چه نقشی در کد ما ایفا میکند.

توضیح کامل appendChild

  1. DOM چیست؟
    DOM یک نمایش ساختاری از سند HTML درختی شکل است که مرورگرها برای نمایش صفحات وب از آن استفاده میکنند. این ساختار به جاوااسکریپت اجازه میدهد تا به عناصر مختلف دسترسی داشته و آنها را تغییر دهد.
  2. متد appendChild چیست؟
    متد appendChild یکی از متدهای رایج برای تغییر DOM است و به ما این امکان را میدهد که یک نود (Node) جدید را به انتهای لیست فرزندان یک نود والد اضافه کنیم.
    این متد فقط یک پارامتر میپذیرد که همان نود فرزند است و این نود به انتهای لیست فرزندان نود والد اضافه میشود.
  3. نحوه استفاده از appendChild در کد ما:
    userCard:در اینجا userCard یک عنصر div است که به صورت پویا برای نمایش اطلاعات هر کاربر ساخته شده است. این عنصر شامل تصویر کاربر، نام و ایمیل آنها میباشد.
    userList:userList یک عنصر div یا section در HTML است که به عنوان محلی برای نمایش لیست کارتهای کاربران در صفحه قرار دارد. این عنصر با استفاده از document.getElementById('user-list') از DOM به دست آمده است.
  4. عملکرد خط userList(userCard);:این خط به طور خاص عنصر userCard که به تازگی ایجاد شده و حاوی اطلاعات یک کاربر است را به انتهای عنصر userList اضافه میکند.
    به این ترتیب، هر بار که یک userCard جدید ساخته میشود، به لیست کارتها در صفحه افزوده میشود و تمامی کارتها به ترتیب اضافه شدن نمایش داده میشوند.

چرا از appendChild استفاده میکنیم؟

  • افزودن پویا به DOM: متد appendChild به ما اجازه میدهد تا به صورت پویا و در زمان اجرا، عناصر جدیدی را به صفحه اضافه کنیم. این امر به ویژه در مواقعی که دادهها از منابع خارجی مانند یک API دریافت میشوند و باید در قالب ساختارهای تکراری نمایش داده شوند، بسیار مفید است.
  • سادگی در استفاده: appendChild یک روش ساده و مستقیم برای اضافه کردن عناصر جدید به DOM است که نیاز به نوشتن کدهای پیچیده ندارد.
  • انعطافپذیری: با استفاده از این متد، میتوان به راحتی عناصر موجود در صفحه را دستکاری کرد، مانند افزودن، حذف یا جابجایی عناصر.

این خط کد به طور خاص به ما کمک میکند تا کارتهای کاربران را به صورت پویا و در حین بارگذاری صفحه یا در پاسخ به تعاملات کاربر ایجاد کرده و نمایش دهیم.

در جاوااسکریپت، متد `forEach` برای اجرای یک تابع روی هر عنصر یک آرایه استفاده میشود. این متد یکی از روشهای متداول برای تکرار روی آرایههاست و به خصوص در مواقعی که نیاز به انجام عملیاتی روی هر عنصر داریم، بسیار مفید است. در کد ما، از `forEach` برای پردازش لیست کاربران که از API دریافت میشود، استفاده شده است. بیایید ببینیم این قسمت از کد چگونه کار میکند:

توضیح users.forEach

فرض کنید بخشی از کد جاوااسکریپت شما به صورت زیر است:

userCard = `
       <div class=&quotcard user-card&quot data-id=&quot${user.id}&quot>
           <img src=&quot${user.avatar}&quot class=&quotcard-img-top&quot alt=&quot${user.first_name} ${user.last_name}&quot>
           <div class=&quotcard-body&quot>
               <h5 class=&quotcard-title&quot>${user.first_name} ${user.last_name}</h5>
               <p class=&quotcard-text&quot>${user.email}</p>
           </div>
       </div>
   `;

توضیح جزئیات forEach:

1. آرایه users:

- users یک آرایه است که از دادههای دریافتی از API ساخته شده و شامل اطلاعات هر کاربر است. این اطلاعات شامل نام، نام خانوادگی، ایمیل و آواتار کاربر میباشد.

- این آرایه با دسترسی به خاصیت `data` از پاسخ JSON دریافت شده، ساخته میشود. (`const users = data.data;`)

2. متد forEach:

- متد `forEach` برای تکرار روی هر عنصر در آرایه `users` به کار میرود.

- این متد به هر عنصر در آرایه به ترتیب دسترسی پیدا میکند و یک تابع مشخص را روی آن اجرا میکند.

3.پاراگراف user:

- درون تابع `forEach`, هر عنصر از آرایه `users` به عنوان پارامتر `user` به تابعی که در `forEach` تعریف شده، ارسال میشود. بنابراین در هر بار اجرای حلقه، متغیر `user` شامل یک آبجکت از اطلاعات یک کاربر میباشد.

4. ساخت کارت کاربر:

- برای هر کاربر، یک عنصر div جدید به نام userCard ساخته میشود که شامل کلاسهای بوت استرپ `col-md-4 mb-4` است.

- سپس محتوای HTML داخلی userCard با استفاده از ویژگیهای کاربر (`user.first_name`, `user.last_name`, `user.email`, `user.avatar`) به شکل دلخواه تکمیل میشود.

userCard = `
       <div class=&quotcard user-card&quot data-id=&quot${user.id}&quot>
           <img src=&quot${user.avatar}&quot class=&quotcard-img-top&quot alt=&quot${user.first_name} ${user.last_name}&quot>
           <div class=&quotcard-body&quot>
               <h5 class=&quotcard-title&quot>${user.first_name} ${user.last_name}</h5>
               <p class=&quotcard-text&quot>${user.email}</p>
           </div>
       </div>
   `;


5. افزودن کارت به DOM:

- پس از ساخت هر کارت کاربر، آن را به عنوان یک فرزند به userList اضافه میکنیم.

- این عمل باعث میشود کارتها به ترتیب در صفحه نمایش داده شوند.

userList(userCard);

چرا از `forEach` استفاده میکنیم؟

- سادگی: `forEach` یک روش ساده و مستقیم برای انجام عملیاتی روی هر عنصر آرایه است و به خوانایی کد کمک میکند.

- عدم نیاز به کنترل دستی ایندکس: برخلاف حلقههای `for` معمولی، در `forEach` نیازی به کنترل دستی ایندکس یا اندازه آرایه نیست.

- بهبود عملکرد کد: `forEach` به صورت داخلی برای بهینهسازی عملکرد در مرورگرها پیادهسازی شده است و میتواند کد را سریعتر و کارآمدتر اجرا کند.

- تمیز و قابل فهم: استفاده از `forEach` باعث میشود کد شما تمیزتر و قابل فهمتر باشد، زیرا هدف شما (اجرای یک عملیات روی هر عنصر آرایه) به وضوح بیان شده است.


در ادامه کد جاوااسکریپت وظیفه دارد که با کلیک بر روی کارت کاربر، جزئیات کاربر را در یک مودال (پنجرهی محاورهای) نمایش دهد. این کار با استفاده از یک تابع ناشناس و رویداد click انجام میشود. بیایید این بخش از کد را به طور کامل بررسی کنیم.

توضیحات کد

// Add click event to open user details in a modal
userCard.querySelector('.user-card').addEventListener('click', () => {
    currentUserId = user.id;
    document.getElementById('modal-avatar').src = user.avatar;
    document.getElementById('modal-name').textContent = `${user.first_name} ${user.last_name}`;
    document.getElementById('modal-email').textContent = user.email;

    // Pre-fill the edit form with user data
    document.getElementById('edit-first-name').value = user.first_name;
    document.getElementById('edit-last-name').value = user.last_name;
    document.getElementById('edit-email').value = user.email;
    document.getElementById('edit-avatar-url').value = user.avatar;

    document.getElementById('edit-user-form').style.display = 'none';
    document.getElementById('edit-user-btn').style.display = 'block';
    $('#userModal').modal('show');
});

توضیحات جزئیات

  1. انتخاب کارت کاربر:
    userCard.querySelector('.user-card')userCard
    یک عنصر div است که قبلاً در کد ایجاد شده و کلاس user-card دارد.
    querySelector('.user-card') برای انتخاب عنصر کارت کاربر از داخل userCard استفاده میشود. این انتخابگر با توجه به کلاس user-card انجام میشود.
  2. اضافه کردن رویداد کلیک:
    .addEventListener('click', () => {addEventListener
    برای گوش دادن به رویدادهای خاص روی یک عنصر استفاده میشود. در اینجا برای رویداد click اعمال شده است.
    وقتی کاربر روی کارت کلیک میکند، تابع ناشناس (آررو فانکشن) اجرا میشود.
  3. ذخیره ID کاربر فعلی:
    currentUserId = user.id;currentUserId
    یک متغیر است که ID کاربر فعلی را نگه میدارد. این ID برای انجام عملیات بعدی مانند ویرایش کاربر مورد استفاده قرار میگیرد.
  4. نمایش جزئیات کاربر در مودال:
    document.getElementById('modal-avatar').src = user.avatar;
    document.getElementById('modal-name').textContent = `${user.first_name} ${user.last_name}`;
    document.getElementById('modal-email').textContent = user.email;
    با استفاده از document.getElementById، عناصری در مودال انتخاب میشوند و دادههای کاربر در آنها قرار میگیرد.
    modal-avatar برای نمایش تصویر کاربر (آواتار) است و src آن به URL تصویر کاربر تنظیم میشود.
    modal-name و modal-email به ترتیب نام کامل و ایمیل کاربر را نمایش میدهند.
  5. پیشپر کردن فرم ویرایش:
    document.getElementById('edit-first-name').value = user.first_name;
    document.getElementById('edit-last-name').value = user.last_name;
    document.getElementById('edit-email').value = user.email;
    document.getElementById('edit-avatar-url').value = user.avatar;
    مقادیر فرم ویرایش کاربر با استفاده از اطلاعات فعلی کاربر پر میشوند.
    این کار باعث میشود که کاربر بتواند به سادگی اطلاعات کاربر را ویرایش کند، زیرا اطلاعات فعلی کاربر در فرم ویرایش به صورت پیشفرض نمایش داده میشود.
  6. مدیریت نمایش فرم ویرایش:
    document.getElementById('edit-user-form').style.display = 'none'; document.getElementById('edit-user-btn').style.display = 'block';
    فرم ویرایش (edit-user-form) در ابتدا مخفی میشود و تنها دکمه ویرایش (edit-user-btn) نمایش داده میشود.
    این کار به این منظور انجام میشود که کاربر ابتدا با کلیک روی دکمه "Edit User" فرم ویرایش را ببیند.
  7. نمایش مودال با استفاده از بوت استرپ:
    code$('#userModal').modal('show');$('#userModal').modal('show');
    از جیکوئری و بوت استرپ برای نمایش مودال استفاده میکند.
    userModal ID مودال است و متد modal('show') برای نمایش آن استفاده میشود.

کاربرد کلی

این بخش از کد به کاربر امکان میدهد تا با کلیک بر روی کارت کاربر، جزئیات بیشتری از آن کاربر را در یک مودال مشاهده کند. همچنین کاربر میتواند اطلاعات کاربر را ویرایش کند، که با نمایش فرم ویرایش درون مودال امکانپذیر است. این مکانیزم تعامل کاربر با صفحه را بهبود میبخشد و تجربه کاربری بهتری را فراهم میکند.


نمایش فرم ویرایش با کلیک بر روی دکمه "ویرایش کاربر"

// Show edit form on &quotEdit User&quot button click
document.getElementById('edit-user-btn').addEventListener('click', () => {
    document.getElementById('edit-user-btn').style.display = 'none';
    document.getElementById('edit-user-form').style.display = 'block';
});

این بخش از کد جاوااسکریپت مسئولیت مدیریت نمایش فرم ویرایش کاربر و پردازش ارسال فرم ویرایش را دارد. بیایید به صورت جزئیتر توضیح دهیم که هر قسمت از این کد چه کار میکند:

  1. انتخاب دکمه "ویرایش کاربر":با استفاده از document.getElementById('edit-user-btn') دکمهای که برای ویرایش کاربر وجود دارد انتخاب میشود.
  2. اضافه کردن رویداد کلیک:متد addEventListener برای اضافه کردن رویداد click به دکمه "ویرایش کاربر" استفاده میشود.
    وقتی کاربر روی این دکمه کلیک میکند، تابع ناشناسی که در اینجا تعریف شده است اجرا میشود.
  3. نمایش فرم ویرایش و مخفی کردن دکمه "ویرایش کاربر":
    document.getElementById('edit-user-btn').style.display = 'none'; باعث میشود که دکمه "ویرایش کاربر" پنهان شود.
    document.getElementById('edit-user-form').style.display = 'block'; باعث میشود که فرم ویرایش که به طور پیشفرض پنهان بود، نمایش داده شود.
    این عمل اجازه میدهد تا کاربر به فرم ویرایش دسترسی پیدا کرده و اطلاعات مورد نظر خود را وارد کند.

مدیریت ارسال فرم ویرایش

// Handle edit form submission
document.getElementById('edit-user-form').addEventListener('submit', (event) => {
    event.preventDefault();
    const updatedUser = {
        first_name: document.getElementById('edit-first-name').value,
        last_name: document.getElementById('edit-last-name').value,
        email: document.getElementById('edit-email').value,
        avatar: document.getElementById('edit-avatar-url').value
    };
});
  1. انتخاب فرم ویرایش کاربر:
    document.getElementById('edit-user-form') فرم ویرایش کاربر را انتخاب میکند.
  2. اضافه کردن رویداد ارسال:
    متد addEventListener برای گوش دادن به رویداد submit در فرم استفاده میشود.
    وقتی کاربر دکمه ارسال (Submit) فرم را فشار میدهد، تابع ناشناس اجرا میشود.
  3. جلوگیری از ارسال پیشفرض فرم:
    event.preventDefault(); برای جلوگیری از رفتار پیشفرض مرورگر هنگام ارسال فرم به کار میرود.
    به طور پیشفرض، فرمها باعث بارگذاری مجدد صفحه میشوند. با استفاده از این خط، مانع از این کار میشویم و به ما اجازه میدهد عملیات ارسال داده به صورت برنامهریزیشده انجام شود.
  4. دریافت دادههای فرم و ساخت آبجکت updatedUser:
    با استفاده از document.getElementById('edit-first-name').value و دیگر دستورات مشابه، مقادیر ورودیهای فرم دریافت میشود.
    یک آبجکت updatedUser ساخته میشود که شامل اطلاعات ویرایششده کاربر است.
    این آبجکت شامل فیلدهای first_name, last_name, email و avatar است که با مقادیر جدیدی که کاربر وارد کرده پر میشود.

کاربرد کلی

این بخش از کد اجازه میدهد که کاربر بتواند اطلاعات یک کاربر خاص را ویرایش کند. هنگامی که کاربر دکمه "ویرایش کاربر" را میفشارد، فرم ویرایش باز میشود و کاربر میتواند اطلاعات مورد نظر خود را تغییر دهد. بعد از تکمیل فرم و فشار دادن دکمه ارسال، دادههای جدید کاربر جمعآوری میشود و میتواند برای بهروزرسانی اطلاعات کاربر در سیستم یا ارسال آن به یک سرور استفاده شود.

این ساختار به شما امکان میدهد که به صورت پویا و با تعامل کاربر، دادهها را مدیریت کنید.