شرح fetch & map & json

أكيد ، كل من هذه الدوال مهمة لبعض العمليات داخل JavaScript

1. fetch

تُستخدم لجلب بيانات من الإنترنت (API).

fetch("https://api.example.com/data")

يمكن استخدامها مع async/await أو .then لمعالجة البيانات بعد أن تصل.

2. json()

تحوّل البيانات التي استلمناها من fetch إلى صيغة يمكن لجاڤا سكريبت فهمها، وهي كائنات JSON.

const response = await fetch("https://api.example.com/data") 
const data = await response.json()

response هو رد الموقع.

response.json() يحوله إلى بيانات جاهزة للاستخدام مثل كائنات أو مصفوفات.

3. map

تستخدم لتكرار عناصر المصفوفة وإعادة تشكيلها أو عرضها.

const names = ["أحمد", "سارة", "ليلى"] 
names.map(name => console.log(name))

الناتج

أحمد سارة ليلى

الى الان بصراحة لم افهم الدالة map بشكل واضح

أولا الدالة fetch تستخدم لإرسال الطلبات API في الخلفية وتقوم بإعادة Promise بالبيانات أو الرد الذي أتى إليك من الخادم.

فقديما كان لإرسال الطلبات في المتصفح كان يتم إعادة تحديث الصفحة لإرسال الطلب سواء تم إرسال النموذج أو إحضار البيانات . ولكن من خلال fetch يمكنك إرسال الطلب في الخلفية دون إعادة تحديث الصفحة.

مثال :

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json()) // تحويل الرد إلى JSON
  .then(data => console.log(data))   // عرض البيانات بعد تحويلها إلى JSON
  .catch(error => console.error('حدث خطأ:', error)); // معالجة الأخطاء

ستجد في المثال السابق أننا إستخدمنا ال fetch لإرسال الطلب API ومن ثم ستعيد إلينا البيانات . وبما أنها Promise كما وضحت لك يمكنك إستخدام then و catch لإستكمال الطلبات و معالجة الأخطاء .

لاحظ أنه عند إستقبال الرد على الطلب نقوم بتحويل الرد إلى كائن json وذلك لنستطيع التعامل معه بسهولة في جافاسكريبت ويتم ذلك من خلال الدالة json.

ثانيا : الدالة map تستخدم لإنشاء مصفوفة جديدة من خلال تطبيق دالة على كل عنصر في المصفوفة الأصلية فمثلا :

const numbers = [1, 2, 3];
const doubled = numbers.map(num => return num * 2);

console.log(doubled); //[2, 4, 6]

لاحظ هنا نحن لدينا مصفوفة من الأرقام ولكننا نريد ضرب تلك الأرقام في 2 فماذا نفعل ؟ من الممكن أن تستخدم حلقة for وتقوم بإنشاء مصفوفة جديدة بداخلها . ولكن في map تقومهي بكل ذلك حيث تقوم بإستقبال دالة وتقوم بتنفيذ تلك الدالة على كل عنصر من العناصر في المصفوفة ولاحظ أننا في تلك الدالة يجب أن نعيد قيمة وتلك القيمة هي التي نريدها للعنصر الجديد.

وستلاحظ كما في المثال السابق بمجرد تمرير دالة تقوم بضرب الرقم في * فستقوم الدالة map بتطبيق تلك الدالة على جميع العناصر وتعيد مصفوفة جديدة بالأرقام الجديدة. 

شرح دالة map بشكل مفصل:
map هي دالة تُستخدم مع المصفوفات (arrays)، وظيفتها أن تمرّ على كل عنصر في المصفوفة وتُرجع نسخة جديدة من المصفوفة بعد تعديل أو تحويل كل عنصر.

مثال:

عندك مجموعة أسماء:

const names = ["أحمد", "سارة", "ليلى"];

وتريد أن تضيف أمام كل اسم كلمة "الأستاذ":

const titles = names.map(name => "الأستاذ " + name); 
console.log(titles);

النتيجة:

["الأستاذ أحمد", "الأستاذ سارة", "الأستاذ ليلى"]

map مرت على كل اسم، وعدّلته، ثم رجعت مصفوفة جديدة فيها التعديل.

مثال اخر:

لنفترض أنك تريد عرض قائمة مدن:

const cities = ["القاهرة", "الأسكندرية", "الجيزة"];

في React:

<ul> 
  {cities.map(city => <li>{city}</li>)} 
</ul>

النتيجة في الصفحة:

القاهرة

الأسكندرية

الجيزة

لذا استخدامتها تكون في حالات مثل:

إذا عندك مصفوفة وتريد تعديل أو إعادة عرض كل عنصر بشكل جديد وإخراج مصفوفة جديدة يمكنك استخدامها