بناء نظام فلترة ديناميكي للمنتجات باستخدام JavaScript

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.

---

مقدمة افتتاحية

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

السيناريو: فلترة المنتجات في متجر إلكتروني

تخيل أنك تعمل على تطوير واجهة خلفية أو حتى واجهة أمامية بسيطة لمتجر إلكتروني. لديك قائمة بجميع المنتجات، وتحتاج إلى عرض فقط تلك التي تتوافق مع معايير معينة يحددها المستخدم، مثل المنتجات المتوفرة في المخزون وبسعر معقول.

1. تعريف البيانات: مصفوفة المنتجات

نبداً بتعريف مصفوفة تحتوي على كائنات، حيث يمثل كل كائن منتجاً بخصائصه (معرف، اسم، سعر، حالة التوفر). هذه هي البيانات الأولية التي سنعمل عليها:

const products = [
  { id: 1, name: "هاتف ذكي", price: 3000, inStock: true },
  { id: 2, name: "حاسوب محمول", price: 5000, inStock: false },
  { id: 3, name: "سماعات لاسلكية", price: 500, inStock: true },
  { id: 4, name: "شاحن سريع", price: 150, inStock: true }
];

لاحظ تنوع المنتجات وحالة التوفر والأسعار، مما يجعلها مثالية لاختبار الفلترة.

2. تحديد معايير الفلترة

هدفنا هو استعراض المنتجات التي تحقق شرطين أساسيين:

1. يجب أن تكون متوفرة في المخزون (inStock: true).
2. يجب أن يكون سعرها أقل من 1000 (price < 1000).

هذه المعايير يمكن أن تأتي من مدخلات المستخدم (مثل مربع بحث أو أزرار تصفية) في تطبيق حقيقي.

3. تطبيق دالة filter()

باستخدام دالة filter()، يمكننا بسهولة تطبيق هذه المعايير. سنقوم بإنشاء مصفوفة جديدة تحتوي فقط على المنتجات التي تستوفي الشروط:

// فلترة المنتجات: نريد فقط المتوفرة في المخزون وسعرها أقل من 1000
const affordableAvailableProducts = products.filter(product => 
  product.inStock === true && product.price < 1000
);

في هذا السطر الواحد، قمنا بما يلي:

• استدعينا .filter() على مصفوفة products.
• مررنا دالة سهمية (product => ...) كمعامل لـ filter(). هذه الدالة ستُطبق على كل product في المصفوفة الأصلية.
• داخل الدالة، وضعنا الشرط المنطقي product.inStock === true && product.price < 1000. إذا كان هذا الشرط صحيحاً (true)، فسيتم تضمين المنتج في المصفوفة الجديدة affordableAvailableProducts.

4. عرض النتائج

بعد عملية الفلترة، سنحتاج إلى رؤية النتائج. في بيئة التطوير، console.log() و console.table() هما أداتان عظيمتان لذلك. console.table() مفيدة بشكل خاص لعرض المصفوفات من الكائنات لأنها تقدمها في شكل جدول يسهل قراءته.

console.log("المنتجات المتاحة والمناسبة لميزانيتك:");
console.table(affordableAvailableProducts);

ماذا تتوقع أن ترى في الـ Console؟

بعد تشغيل هذا الكود، ستجد أن affordableAvailableProducts ستحتوي على المنتجات التالية فقط:

• { id: 3, name: "سماعات لاسلكية", price: 500, inStock: true }
• { id: 4, name: "شاحن سريع", price: 150, inStock: true }

المنتج الأول (هاتف ذكي) تم استبعاده لأن سعره 3000 (ليس أقل من 1000). المنتج الثاني (حاسوب محمول) تم استبعاده لأنه inStock: false.

تطبيقات إضافية

هذا المفهوم ليس مقتصراً على المنتجات. يمكنك استخدامه لـ:

• فلترة قائمة بالمستخدمين النشطين.
• تصفية المقالات في مدونة حسب الكاتب أو الفئة.
• البحث عن مهام معينة في قائمة To-Do.

خاتمة

لقد رأيت كيف يمكن لسطرين من الكود باستخدام دالة filter() أن يؤديا وظيفة قوية وضرورية في معالجة البيانات. هذه هي اللبنات الأساسية التي تُبنى عليها تطبيقات الويب التفاعلية. من خلال فهمك العميق لهذه الأدوات، يمكنك البدء في بناء ميزات معقدة لتصفية وبحث البيانات بكفاءة عالية، مما يحسن بشكل كبير تجربة المستخدم في تطبيقاتك.