68- دروس جافا سكربت – JS JSON

## مقدمة إلى JSON في JavaScript

JSON، أو JavaScript Object Notation، هو تنسيق خفيف الوزن لتبادل البيانات، وهو مستوحى من تركيب [شركة برمجة مصرية] كائنات جافا سكريبت. يُستخدم JSON في الغالب لتمثيل البيانات المهيكلة ونقلها بين الخادم والعميل في تطبيقات الويب. يتميز JSON بكونه سهل القراءة والكتابة للبشر وسهل التحليل والتوليد بواسطة الآلات.

### الأساسيات

JSON يدعم عددًا من أنواع البيانات الأساسية:
– **الكائنات (Objects):** تمثل مجموعة من القيم في شكل أزواج مفتاح-قيمة.
– **المصفوفات (Arrays):** تمثل قائمة مرتبة من القيم.
– **السلاسل النصية (Strings):** تمثل نصًا محاطًا بعلامتي اقتباس مزدوجتين.
– **الأعداد (Numbers):** تمثل قيمًا رقمية.
– **القيم المنطقية (Boolean):** يمكن أن تكون `true` أو `false`.
– **القيمة الفارغة (null):** تمثل قيمة خالية أو غير موجودة.

### مثال على كائن JSON

on
{
  "name": "Ahmed",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"],
  "address": {
    "street": "123 Main St",
    "city": "Cairo",
    "country": "Egypt"
  }
}

### كيفية التعامل مع JSON في JavaScript

#### تحويل كائن JavaScript إلى JSON

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

const user = {
  name: "Ahmed",
  age: 30,
  isStudent: false
};

const jsonString = JSON.stringify(user);
console.log(jsonString);
// Output: {"name":"Ahmed","age":30,"isStudent":false}

#### تحويل JSON إلى كائن JavaScript

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

const jsonString = '{"name":"Ahmed","age":30,"isStudent":false}';

const user = JSON.parse(jsonString);
console.log(user.name); // Output: Ahmed
console.log(user.age);  // Output: 30

### استخدام JSON في تطبيقات الويب

يُستخدم JSON بشكل شائع في تطبيقات الويب لنقل البيانات بين العميل والخادم. إليك مثال على كيفية إرسال طلب جلب (fetch) واستلام بيانات JSON.

#### إرسال طلب GET واستلام JSON

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

#### إرسال طلب POST مع JSON

const newData = {
  username: "Ali",
  email: "ali@example.com"
};

fetch('https://api.example.com/addUser', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newData)
})
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

### الخاتمة

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