اذهب إلى المحتوى
  • 0

مفهوم JSON, ما هو JSON كيفية استخدامه

Hafsa Aly

السؤال

Recommended Posts

  • 0

مرحبا،

إن أغلب البيانات في عالم الويب يتم تناقلها بواسطة JSON:  JavaScript Object Notation 

تمثل JSON نفس صيغة الكتابة التي تعتمد عليها JavaScript في بناء أغراضها.

وهي هيكلية بيانات بسيطة.

مثال:

بناء غرض JSON للتعبير عن معلومات شخص ما.

var person = {
	"name":"John", 
	"age":31, 
	"city":"New York"
};

تكتب أغراض جيسون ضمن أقواس مجعدة { } وتحوي داخلها مجموعة من الثنائيات التي هي مفتاح و قيمة.

المفتاح (الخاصية) مثل name - age يجب أن تكون سلسسة نصية أو رقم أو معرف خاص.

أما القيمة يمكن أن تكون أي شيئ مثل أعداد أو سلاسل نصية أو مصفوفات أو حتى أغراض أخرى.

نكتب القيم النصية ضمن علامتي اقتباس ( "مزدوجة" أو 'مفردة' )، أما الأرقام لا نضع حولها شيئ.

للوصول للقيمة ضمن غرض نستخد اسم الغرض ثم نقطة ثم اسم الخاصية (المفتاح)

مثال:

// returns John
person.name;

أو عن طريق المحددات [ ] مع اسم الخاصية:

// returns John
person["name"];

و لإسناد قيمة لغرض JSON نقوم بنفس الخطوة السابقة:

person.name = "Gilbert";

person["name"] = "Gilbert";

نمط البيانات المسمح تخزينه في القيمة من الأنواع التالية:

  • a string
  • a number
  • (JSON object)
  • an array
  • a boolean
  • null

مجموعة أمثلة لتخزين قيم متنوعة في غرض JSON:

// null
{ "middlename":null }

// boolean
{ "sale":true }

// array
{
	"employees":[ "John", "Anna", "Peter" ]
}

// JSON
{
	"employee":{ "name":"John", "age":30, "city":"New York" }
}

عندما نريد تناقل غرض JSON نقوم بتتحويله لسلسلة نصية ونضع ' (اقتباس فردي) قبله و بعده (أو لأجل تجميع السلاسل المكونة له كما في المثال التالي.

نستخدم الدالة JSON.parse لتحويل سلسلة نصية مكتوبة مسبقا بتنسيق JSON لتعطينا متحول يحمص خواص و قيم هذا الغرض.

كيفية ربط JSON مع صفحة HTML:

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

<p id="demo"></p>

<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

نلاحظ أن غرض JSON هنا (الأساسي) فيه خاصية واحدة تدعى employees تحوي مصفوفة من الأغراض الأخرى (الفرعية)

نقوم بالوصول للأغراض الفرعية من خلال دليل المصفوفة index أي الرقم و من ثم نستخدم اسن الخاصية المطلوبة.

يوجد شرح باللغة العربية جيد مقدم من أكاديمية حسوب لـ  تعلم JSON

كما يمكنك الإطلاع على المرجع الرئيسي من موقع w3schools يوجد أمثلة تفاعلية ويمكنك تغيير الشيفرة البرمجية و مراقبة النتائج.

بالتوفيق

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مرحبًا @Hafsa Aly،

كلمة JSON و تلفظ جيسون هي اختصار ل JavaScript Object Notation. وسميت بهذا الاسم ﻷن جافاسكريبت هي أول لغة قامت بالإستفادة من هذه الصيغة.

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

تعد صيغة JSON أسهل طريقة لنقل هذه البيانات لذلك يتم استخدامها كثيرًا في هذا المجال، حيث أنها قبل البدء بـ JSON كانت تستخدم XML لكن الآن معظم المبرمجين يستخدمون JSON ﻷنها أكثر سهولة وأقل عرضة للخطر.

الصيغة الأساسية لـ JSON هي:

{
"name" : "ahmed",
"age" : 7,
"coulurs": ["red", "blue", "green"]

}

وكما تلاحظ يوجد لدينا عدد من المفاتيح والقيم ولكل مفتاح قيمة تقابله.

وعند الإنتقال إلى جافاسكريبت يتم تعريف JSON كمتغير وبداخله هذه القيم التي هي على شكل مصفوفة عناصر وتسمى في جافاسكريبت object ويمكن كتابتها على الشكل التالي:

var object = {
name : "ahmed",
age : 7,
coulurs: ["red", "blue", "green"]

}

وكما تلاحظ فإن JSON تتألف من قسمين key و value ويمكنك الحصول على قيمة أي مفتاح بجافاسكريبت بسهولة من خلال اسم المفتاح.

مثلًا من خلال السطر التالي:

document.write(object[0].name);  //output: ahmed
document.write(object[0].age);  //output: 7

فجسون هي عبارة عن صيغة برمجية لتسهيل نقل البيانات من الخادم إلى صفحة الويب فقط.

شكرًا لك.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

JSON هو اختصار لـ JavaScript Object Notation ، وهو وسيلة لتخزين المعلومات بطريقة منظمة وسهلة الوصول. باختصار ، يمنحنا ذلك مجموعة من البيانات التي يمكن للبشر قراءتها والتي يمكننا الوصول إليها بطريقة منطقية.
تخزين بيانات JSON: كمثال بسيط ، يمكن كتابة المعلومات الخاصة في JSON على النحو التالي:

var my_info = {
	"age" : "22",
	"name" : "محمد أبو عواد",
	"gender" : "male"
};

يؤدي هذا إلى إنشاء كائن يمكننا الوصول إليه باستخدام المتغير my_info. بإحاطة قيمة المتغير بأقواس معقوفة ، فإننا نشير إلى أن القيمة هي كائن. داخل الكائن ، يمكننا التصريح عن أي عدد من الخصائص باستخدام اقتران "name": "value" ، مفصولة بفواصل. للوصول إلى المعلومات المخزنة في my_info، يمكننا ببساطة الرجوع إلى اسم الخاصية التي نحتاجها. على سبيل المثال ، للوصول إلى معلومات عني ، يمكننا استخدام المقتطفات التالية:

document.write('moahmmed is ' my_info.age); // Output: moahmmed is 24
document.write('moahmmed is a ' my_info.gender); // Output: moahmmed is a male

تخزين بيانات JSON في المصفوفات
يتضمن المثال الأكثر تعقيدًا تخزين شخصين في متغير واحد. للقيام بذلك ، نضع كائنات متعددة بين أقواس مربعة ، مما يدل على مصفوفة. على سبيل المثال ، إذا كنت بحاجة إلى تضمين معلومات عني وعن أخي في متغير واحد ، فيمكنني استخدام ما يلي:

var family = [{
    "name" : "mohammed",
    "age" : "22",
    "gender" : "male"
},
{
    "name" : "osama",
    "age" : "16",
    "gender" : "male"
}];

للوصول إلى هذه المعلومات ، نحتاج إلى الوصول إلى فهرس مصفوفة الشخص الذي نرغب في الوصول إليه. على سبيل المثال ، سنستخدم المقتطف التالي للوصول إلى المعلومات المخزنة في العائلة:

document.write(family[1].name); // Output: osama
document.write(family[0].age); // Output: 22

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

var family = {
    "mohammed" : {
        "name" : "mohammed",
        "age" : "22",
        "gender" : "male"
    },
    "osama" : {
        "name" : "osama",
        "age" : "16",
        "gender" : "male"
    }

الوصول إلى المعلومات في الكائنات المتداخلة أسهل قليلاً في الفهم ؛ للوصول إلى المعلومات الموجودة في الكائن ، سنستخدم المقتطف التالي:

document.write(family.osama.name); // Output: osama
document.write(family.mohammed.age); // Output: 22
document.write(family.osama.gender); // Output: male

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...