التعامل مع JSON في JavaScript: قراءة البيانات وكتابتها

JSON (JavaScript Object Notation) هو تنسيق شائع لتبادل البيانات بين الخوادم والمتصفحات، وهو خفيف الوزن وقابل للقراءة بسهولة لكل من البشر والآلات. يتميز JSON بأنه مدعوم بشكل مباشر في JavaScript، حيث يمكن تحويل البيانات إلى تنسيق JSON أو قراءة البيانات من JSON بسهولة.

في هذا الدليل، سنتعلم كيفية التعامل مع JSON في JavaScript، بما في ذلك قراءة البيانات وكتابتها.

1. ما هو JSON؟

JSON هو تنسيق يستخدم في تبادل البيانات يشبه الكائنات في JavaScript. يتكون JSON من أزواج مفتاح-قيمة (key-value pairs) تمامًا مثل الكائنات، وهو مدعوم في معظم لغات البرمجة.

مثال على JSON:

{
    "name": "أحمد",
    "age": 30,
    "isMarried": false,
    "children": ["سارة", "علي"]
}

• name: المفتاح (key) و "أحمد" هي القيمة (value).
• age: المفتاح و 30 هي القيمة.
• isMarried: المفتاح و false هي القيمة (من النوع المنطقي).
• children: المفتاح و ["سارة", "علي"] هي مصفوفة.

2. تحويل الكائنات إلى JSON باستخدام `JSON.stringify()`

عندما تحتاج إلى إرسال البيانات من المتصفح إلى الخادم، يمكنك تحويل الكائنات إلى تنسيق JSON باستخدام الدالة JSON.stringify(). هذه الدالة تأخذ كائنًا وتحوله إلى سلسلة JSON.

مثال:

const person = {
    name: "أحمد",
    age: 30,
    isMarried: false,
    children: ["سارة", "علي"]
};

const jsonString = JSON.stringify(person);
console.log(jsonString);

النتيجة:

{"name":"أحمد","age":30,"isMarried":false,"children":["سارة","علي"]}

3. تحويل JSON إلى كائن باستخدام `JSON.parse()`

عند استلام بيانات JSON من خادم، يمكنك تحويل هذه البيانات إلى كائنات JavaScript باستخدام JSON.parse(). هذه الدالة تأخذ سلسلة JSON وتحولها إلى كائن JavaScript يمكنك التعامل معه.

مثال:

const jsonString = '{"name":"أحمد","age":30,"isMarried":false,"children":["سارة","علي"]}';

const person = JSON.parse(jsonString);
console.log(person.name);  // أحمد
console.log(person.age);   // 30

4. قراءة بيانات JSON من API

غالبًا ما يتم استخدام JSON في التفاعل مع واجهات برمجية (APIs) لجلب البيانات من الخادم. يمكنك استخدام fetch() في JavaScript لطلب بيانات JSON من API.

مثال:

fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        console.log("الاسم:", data.name);
    })
    .catch(error => {
        console.error("حدث خطأ:", error);
    });

في هذا المثال، نستخدم fetch() لطلب بيانات من API، ثم نستخدم response.json() لتحويل الاستجابة إلى كائن JSON يمكننا التعامل معه.

5. كتابة بيانات JSON إلى ملف

في JavaScript (في بيئات Node.js)، يمكنك أيضًا كتابة بيانات JSON إلى ملف. أولاً، تحتاج إلى تحويل الكائن إلى JSON باستخدام JSON.stringify()، ثم استخدام الوحدة fs لكتابة البيانات إلى ملف.

مثال في Node.js:

const fs = require('fs');

const person = {
    name: "أحمد",
    age: 30,
    isMarried: false,
    children: ["سارة", "علي"]
};

const jsonString = JSON.stringify(person, null, 2);

fs.writeFile('person.json', jsonString, (err) => {
    if (err) {
        console.error('حدث خطأ أثناء الكتابة إلى الملف', err);
    } else {
        console.log('تم كتابة الملف بنجاح!');
    }
});

6. التعامل مع JSON المعقد

قد يحتوي JSON على بيانات متداخلة مثل الكائنات داخل كائنات أو مصفوفات داخل كائنات. يمكنك التعامل مع هذه البيانات بنفس الطريقة التي تتعامل بها مع الكائنات والمصفوفات في JavaScript.

مثال:

{
    "name": "أحمد",
    "address": {
        "city": "الرياض",
        "postalCode": "12345"
    },
    "skills": ["برمجة", "تصميم", "تحليل"]
}

الوصول إلى البيانات المتداخلة:

const data = {
    name: "أحمد",
    address: {
        city: "الرياض",
        postalCode: "12345"
    },
    skills: ["برمجة", "تصميم", "تحليل"]
};

console.log(data.address.city);  // الرياض
console.log(data.skills[0]);     // برمجة

7. التعامل مع الأخطاء أثناء تحويل JSON

أحيانًا قد تواجه أخطاء أثناء تحويل JSON، سواء كان ذلك بسبب تنسيق غير صالح أو مشكلة أخرى. يمكنك استخدام try...catch لمعالجة الأخطاء.

مثال:

const invalidJson = '{"name": "أحمد", "age": 30,';  // JSON غير مكتمل

try {
    const person = JSON.parse(invalidJson);
    console.log(person);
} catch (error) {
    console.error("خطأ في تحويل JSON:", error.message);
}

8. الاستخدامات العملية لـ JSON

1. التفاعل مع APIs:

عادة ما تستخدم JSON لجلب البيانات من APIs مثل بيانات الطقس، المستخدمين، أو المنتجات.

2. تخزين البيانات:

يمكنك تخزين بيانات المستخدم محليًا في المتصفح باستخدام localStorage أو sessionStorage عن طريق تحويل الكائنات إلى JSON.

3. نقل البيانات:

عند إرسال بيانات من الواجهة الأمامية إلى الخادم، يتم عادة تحويل البيانات إلى تنسيق JSON.

9. الخاتمة

التعامل مع JSON هو جزء أساسي من تطوير تطبيقات الويب الحديثة. سواء كنت تحتاج إلى جلب البيانات من API أو كتابة بيانات إلى خادم، فإن فهم كيفية قراءة وكتابة JSON سيساعدك في بناء تطبيقات قوية وقابلة للتوسيع.

من خلال هذا الدليل، تعلمنا كيفية تحويل الكائنات إلى JSON باستخدام JSON.stringify()، وكيفية قراءة بيانات JSON باستخدام JSON.parse()، وكذلك كيفية جلب البيانات من API والتعامل مع JSON المعقد.

نصائح إضافية:

1. التجربة والممارسة: حاول التعامل مع بيانات JSON من واجهات برمجية (APIs) وتجربة قراءة وكتابة البيانات بنفسك.
2. التحقق من البيانات: تأكد دائمًا من أن بيانات JSON صالحة قبل محاولة تحويلها.
3. استخدام أدوات JSON: استخدم أدوات مثل JSONLint للتحقق من صحة تنسيق JSON الخاص بك.