كيف يمكننا اضافة new object الى ملف json من خلال form ثم عرض محتوى الملف في الصفحة الرئيسية

Ayham Rabie · 12 فبراير

اريد انشاء form تأخذ المعلومات من المستخدم ثم نقوم بحفظها في ملف json ثم من خلال هذا الملف نقوم بملء الصفحة الرئيسية بالمعلومات التي لدينا بالملف

محمد عاطف17 · 12 فبراير

ستحتاج أن تتعلم التعامل مع وحدة fs في Node.js لتحقيق ذلك ويمكنك قراءة المقال التالي لتعلم كيفية التعامل مع تلك الوحدة.

أولا ستحتاج إنشاء مسار لإستقبال البيانات من النموذج form .

بعد ذلك ستحتاج أولا لقراءة البينات الموجودة في ملف json وذلك لتستطيع الإضافة عليها . حيث لو قمت بإضافة الملفات مباشرة على الملف ستفقد البيانات القديمة .

ستحتاج إلى قراءة الملف من خلال الدالة readFile في fs بعد ذلك سيكون لديك البيانات الموجودة في الملف ولكن ستلاحظ انها سلسلة نصية لذلك يجب أولا تحويلها إلى json من خلال JSON.parse .

بعد ذلك ستقوم بإضافة المستخدم الجديد إلى البيانات التي قمت بإستخراجها من الملف ومن ثم إضافة البيانات الجديدة بعد تعديلها من خلال الدالة writeFile في fs . وإليك الكود المسئول عن ذلك :

app.post('/user', (req, res) => {
    const { name, email } = req.body;
    const newUser = { name, email };

    fs.readFile('data.json', (err, data) => {
        let users = [];
        if (!err) {
            users = JSON.parse(data); //إذا كان هناك بيانات سابقة نقوم بإحضارها
        }

        // إضافة المستخدم الجديد إلى البيانات القديمة
        users.push(newUser);

        // حفظ البيانات الجديدة في الملف
        fs.writeFile('data.json', JSON.stringify(users, null, 2), (err) => {
            if (err) {
                return res.status(500).send('Error saving data');
            }
            res.json({ message: 'User added successfully!' });
        });
    });

});

الآن يمكنك وضع الكود السابق لديك في الخادم وإرسال الطلب له وسيتم إضافة البيانات إلى الملف.

والآن لننشئ عنوان أخر لجلب البيانات من الملف وإرسالها إلى العميل :

app.get('/user', (req, res) => {
    fs.readFile('data.json', (err, data) => {
        if (err) {
            return res.status(500).send('Error reading data file');
        }
        const userData = JSON.parse(data);
        res.json(userData);
    });
});

هنا إستخدمنا نفس الدالة السابقة readFile لقراءة الملف وإرسال البيانات منه بعد تحويلها إلى json من خلال JSON.parse .

Mustafa Mahmoud7 · 12 فبراير

لا يمكن تعديل ملف JSON مباشرة من خلال المتصفح لأن JavaScript في المتصفح لا يمتلك صلاحيات الكتابة على الملفات لأسباب أمنية.
يمكنك حفظ المعلومات في الذاكرة المحلية localStorage بحيث يتم تخزين البيانات في المتصفح واسترجاعها عند إعادة تحميل الصفحة.
نقوم بإنشاء ملف index.html وإنشاء الـ form كالتالي

<!DOCTYPE html>
<html lang="ar">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>إدارة المستخدمين</title>
</head>

<body>
  <h2>إدخال معلومات المستخدم</h2>
  <form id="userForm">
    <input type="text" id="name" placeholder="الاسم" required>
    <input type="email" id="email" placeholder="البريد الإلكتروني" required>
    <button type="submit">إضافة مستخدم</button>
  </form>
 	 <h2>قائمة المستخدمين</h2>
 	 <div id="userList"></div>
  <script src="./script.js">
  </script>
</body>

</html>

بعد ذلك نقوم بعمل ملف script.js ونضع به هذه الأكواد وستكون هي المسؤوالة عن الإضافة إلي localStorage وستكون الأكواد كالتالي

// استرجاع المستخدمين المخزنين مسبقًا
let users = JSON.parse(localStorage.getItem("users")) || [];

// عرض المستخدمين عند تحميل الصفحة
function displayUsers() {
  const userList = document.getElementById("userList");
  userList.innerHTML = "";
  users.forEach((user, index) => {
    const userDiv = document.createElement("div");
    userDiv.classList.add("user-item");
    userDiv.innerHTML = `
                 <span>${user.name} - ${user.email}</span>
                 <button onclick="deleteUser(${index})">حذف</button>
             `;
    userList.appendChild(userDiv);
  });
}

// إضافة مستخدم جديد
document.getElementById("userForm").addEventListener("submit", function (event) {
  event.preventDefault();
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  const user = { name, email };

  users.push(user); // إضافة المستخدم إلى القائمة
  localStorage.setItem("users", JSON.stringify(users)); // تخزين في localStorage

  displayUsers();  // تحديث العرض
  this.reset();    // إعادة تعيين النموذج
});

displayUsers();

قمنا بعمل الدالة الأولى ()displayUsers وهي تقوم بعرض المستخدمين عند تحميل الصفحة أو إضافة أي مستخدم جديد ثم بعد هذه الدالة قمنا بالوصول إلى الـ form وفي كل مرة نقوم بتقديم النموذج نقوم بإضافة البيانات إلى localStorage واستدعاء الدالة ()displayUsers مرة أخرى لتحديث القائمة بالمستخدم الجديد.

أو يمكنك عمل خادم بواسطة Nodejs وتتعامل مع ملفات JSON والتعديل عليها كما ذكر لك الأستاذ محمد ويمكنك بعد ذلك إرسال واستقبال البيانات إلى الخادم والتعديل في ملف JSON أو القراءة منه.

بعد إنشاءك للخادم تستطيع إرسال واستقبال البيانات من الخادم كالتالي على

const API_URL = "http://localhost:3000/user"; // عنوان API
        // جلب المستخدمين من الخادم
        async function fetchUsers() {
            try {
                const response = await fetch(API_URL);
                const users = await response.json();//تحويل البيانات من جسون إلى كائن جافاسكربت
                displayUsers(users);
            } catch (error) {
                console.error("خطأ في جلب المستخدمين:", error);
            }
        }

        // عرض المستخدمين في الصفحة
        function displayUsers(users) {
            const userList = document.getElementById("userList");
            userList.innerHTML = "";

            users.forEach((user, index) => {
                const userDiv = document.createElement("div");
                userDiv.classList.add("user-item");
                userDiv.innerHTML = `
                    <span>${user.name} - ${user.email}</span>
                    <button onclick="deleteUser(${index})">حذف</button>
                `;
                userList.appendChild(userDiv);
            });
        }

        // إضافة مستخدم جديد
        document.getElementById("userForm").addEventListener("submit", async function(event) {
            event.preventDefault();

            const name = document.getElementById("name").value;
            const email = document.getElementById("email").value;
            const user = { name, email };

            try {
                await fetch(API_URL, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(user)// تحويل البيانات من كائن جافاسكربت إلى جيسون
                });
                fetchUsers(); // تحديث القائمة بعد الإضافة
                this.reset(); // إعادة تعيين النموذج
            } catch (error) {
                console.error("خطأ في إضافة المستخدم:", error);
            }
          }

// تحميل المستخدمين عند فتح الصفحة
fetchUsers();

بهذه الطريقة قمنا بإرسال واستقبال الطلبات والتواصل مع الخادم والحفظ في ملف JSON بدلا من localstorage في بداية تحميل الصفحة سيتم إرسال طلب للخادم لجلب كل المستخدمين ثم بعد ذلك عند تقديم النموذج سيتم إرسال المستخدم للخادم وتخزينه في الملف يتم إعادة جلب المستخدمين مرة أخرى لعرضهم بالبيانات الجدية في ملف JSON

كيف يمكننا اضافة new object الى ملف json من خلال form ثم عرض محتوى الملف في الصفحة الرئيسية

السؤال

Ayham Rabie

2 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف17

Mustafa Mahmoud7

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية