الجزء الخامس عشر – ما هو JSON؟- سلسلة FSWD – JS

ahmedمنذ 4 أسابيع

0 121 2 دقائق

🟡 1. ما هو JSON؟

JSON هو تنسيق بيانات يُستخدم لتبادل البيانات بين الخوادم والعملاء (مثلاً بين المتصفح والخادم). بيتم استخدامه بشكل كبير في APIs والعديد من التطبيقات.

JSON هو تنسيق نصي خفيف وسهل القراءة.
يُستخدم لتمثيل البيانات في شكل مفتاح: قيمة.

✅ مثال على JSON

{
  "name": "Ahmed",
  "age": 25,
  "isStudent": false,
  "courses": ["JavaScript", "Python", "HTML"]
}

🟡 2. تحويل البيانات إلى JSON والعكس

في JavaScript، ممكن تحويل JavaScript Object إلى JSON باستخدام دالة JSON.stringify()، والعكس باستخدام JSON.parse().

✅ تحويل JavaScript Object إلى JSON:

دالة JSON.stringify() بتحول الكائنات أو المصفوفات إلى تنسيق JSON.

const person = {
  name: "Ahmed",
  age: 25,
  isStudent: false
};

// تحويل الكائن إلى JSON
const personJSON = JSON.stringify(person);

console.log(personJSON);

النتيجة:

{"name":"Ahmed","age":25,"isStudent":false}

✅ تحويل JSON إلى JavaScript Object:

دالة JSON.parse() بتحول الـ JSON إلى JavaScript Object.

const personJSON = '{"name": "Ahmed", "age": 25, "isStudent": false}';

// تحويل JSON إلى JavaScript Object
const person = JSON.parse(personJSON);

console.log(person.name);  // "Ahmed"
console.log(person.age);   // 25

النتيجة:

Ahmed
25

🟡 3. استخدام JSON مع APIs

من الاستخدامات الرئيسية لـ JSON هو التبادل بين العميل والخادم باستخدام APIs. في الغالب، الويب يستخدم JSON كتنسيق رئيسي لتبادل البيانات.

✅ إرسال طلب باستخدام JSON (Post Request):

مثال على إرسال بيانات JSON باستخدام Fetch API:

const data = {
  name: "Ahmed",
  age: 25
};

fetch("https://example.com/api", {
  method: "POST",  // طريقة الطلب
  headers: {
    "Content-Type": "application/json"  // نوع المحتوى JSON
  },
  body: JSON.stringify(data)  // تحويل الكائن إلى JSON
})
  .then(response => response.json())  // تحويل الاستجابة إلى JSON
  .then(data => console.log(data))
  .catch(error => console.log("Error:", error));

✅ استقبال بيانات JSON من API (Get Request):

مثال على استقبال بيانات JSON باستخدام Fetch API:

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())  // تحويل الاستجابة إلى JSON
  .then(users => {
    console.log(users);  // طباعة بيانات المستخدمين
  })
  .catch(error => console.log("Error:", error));

✅ مثال متكامل مع تحويل بيانات بين JSON و JavaScript Objects

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON Example</title>
</head>
<body>
  <script>
    // 1. تحويل JavaScript Object إلى JSON
    const person = {
      name: "Ahmed",
      age: 25,
      isStudent: false
    };

    const personJSON = JSON.stringify(person);
    console.log("JSON format:", personJSON);

    // 2. تحويل JSON إلى JavaScript Object
    const personParsed = JSON.parse(personJSON);
    console.log("JavaScript Object:", personParsed);
    
    // 3. إرسال JSON إلى API
    const data = {
      name: "Ahmed",
      age: 25
    };

    fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)  // تحويل الكائن إلى JSON
    })
    .then(response => response.json())  // تحويل الاستجابة إلى JSON
    .then(result => {
      console.log("Response from API:", result);
    })
    .catch(error => console.log("Error:", error));

    // 4. استقبال بيانات JSON من API
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())  // تحويل الاستجابة إلى JSON
      .then(users => {
        console.log("Users from API:", users);
      })
      .catch(error => console.log("Error:", error));
  </script>
</body>
</html>

✅ شرح الكود:

تحويل JavaScript Object إلى JSON:
- استخدمنا JSON.stringify() لتحويل الكائن person إلى JSON.
تحويل JSON إلى JavaScript Object:
- استخدمنا JSON.parse() لتحويل النص الـ JSON إلى كائن.
إرسال JSON إلى API:
- استخدمنا fetch() لإرسال بيانات POST إلى الـ API مع JSON في الجسم.
استقبال بيانات JSON من API:
- استخدمنا fetch() لعمل طلب GET لاستقبال بيانات JSON من API (في المثال دا استخدمنا jsonplaceholder.typicode.com كمثال).