التعامل مع البيانات بصيغة JSON في جافا سكريبت

ماهي صيغة JSON؟

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

تستخدم JSON عادة في تطبيقات الويب لتبادل البيانات بين الخادم والمتصفح، ولتخزين البيانات في قواعد البيانات أو لنقلها عبر الشبكة.

تتكون صيغة JSON من مجموعات من الأزواج (الاسم: القيمة) ويمكن أن تكون القيمة من أنواع البيانات المختلفة مثل النصوص، الأعداد، الكائنات، المصفوفات، القيم المنطقية (صح/خطأ) والقيم الفارغة (null).

إليك مثال بسيط على JSON:

{
 "name": "John Doe",
 "age": 30,
 "isStudent": false,
 "courses": ["Math", "Science", "History"],
 "address": {
   "street": "123 Main St",
   "city": "Anytown",
   "zipcode": "12345"
 }
}

في هذا المثال، يحتوي الكائن JSON على معلومات عن شخص معين:

• name هو نص.
• age هو عدد.
• isStudent هو قيمة منطقية.
• courses هي مصفوفة من النصوص.
• address هو كائن يحتوي على أزواج أخرى (الاسم: القيمة).

التعامل مع البيانات بصيغة JSON في جافا سكريبت

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

• JSON.stringify(): لتحويل كائن JavaScript إلى سلسلة JSON.
• JSON.parse(): لتحويل سلسلة JSON إلى كائن JavaScript.

إليك أمثلة على كيفية استخدام هذه الطريقتين:

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

لنفترض أن لديك كائن JavaScript وترغب في تحويله إلى سلسلة JSON لإرساله إلى الخادم أو لتخزينه في متصفح:

const person = {
 name: "John Doe",
 age: 30,
 isStudent: false,
 courses: ["Math", "Science", "History"],
 address: {
   street: "123 Main St",
   city: "Anytown",
   zipcode: "12345"
 }
};

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

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

لنفترض أنك استلمت سلسلة JSON من الخادم وتريد تحويلها إلى كائن JavaScript لاستخدامها في التطبيق:

const jsonString = '{"name":"John Doe","age":30,"isStudent":false,"courses":["Math","Science","History"],"address":{"street":"123 Main St","city":"Anytown","zipcode":"12345"}}';

const person = JSON.parse(jsonString);
console.log(person);
console.log(person.name); // Output: John Doe

التعامل مع JSON في طلبات HTTP

إرسال البيانات بصيغة JSON إلى الخادم باستخدام fetch:

const person = {
 name: "John Doe",
 age: 30,
 isStudent: false,
 courses: ["Math", "Science", "History"],
 address: {
   street: "123 Main St",
   city: "Anytown",
   zipcode: "12345"
 }
};

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

استلام البيانات بصيغة JSON من الخادم:

fetch('https://example.com/api')
 .then(response => response.json())
 .then(data => {
   console.log(data);
   // يمكنك الآن التعامل مع البيانات ككائن JavaScript
 })
 .catch(error => console.error('Error:', error));

بهذه الطرق، يمكنك التعامل مع البيانات بصيغة JSON بسهولة في JavaScript سواء كنت تقوم بإرسال البيانات أو استلامها، أو حتى تخزينها ومعالجتها محلياً.