Array Filter এবং Mapping

KnockoutJS তে Array Filter এবং Mapping দুটি অত্যন্ত শক্তিশালী ফিচার, যা ডেটা অ্যারে এবং UI এর মধ্যে ডেটার পরিবর্তন এবং প্রদর্শন করতে সাহায্য করে। Array Filter ব্যবহার করে আপনি একটি অ্যারে থেকে নির্দিষ্ট শর্তের ভিত্তিতে আইটেমগুলো ফিল্টার করতে পারেন এবং Mapping ব্যবহার করে আপনি একটি অ্যারেকে নির্দিষ্ট ফর্ম্যাটে রূপান্তর করতে পারেন।

এখানে KnockoutJS তে Array Filter এবং Mapping ব্যবহারের বিস্তারিত আলোচনা করা হয়েছে।

1. Array Filter in KnockoutJS

Array Filter ফিচারটি KnockoutJS এর ko.utils.arrayFilter() ফাংশন ব্যবহার করে কাজ করে। এটি একটি অ্যারে থেকে নির্দিষ্ট শর্তের উপর ভিত্তি করে আইটেমগুলোকে ফিল্টার করে।

Array Filter ব্যবহার করার ধারণা

KnockoutJS তে ko.utils.arrayFilter() একটি utility ফাংশন যা একটি অ্যারে এবং একটি ফিল্টার ফাংশন নেয় এবং সেই শর্ত মেনে ফিল্টার করা একটি নতুন অ্যারে রিটার্ন করে।

Syntax:

ko.utils.arrayFilter(array, function(item) {
    return condition; // Return true or false based on condition
});

Example:

ধরা যাক, আমাদের একটি অ্যারে আছে যেখানে কিছু ফল রয়েছে, এবং আমরা শুধুমাত্র যেসব ফলের নামের দৈর্ঘ্য ৫ অক্ষরের বেশি, তা ফিল্টার করতে চাই।

// Observable Array
var fruits = ko.observableArray(['Apple', 'Banana', 'Orange', 'Grapes']);

// Filtered Fruits - Length > 5 characters
var filteredFruits = ko.computed(function() {
    return ko.utils.arrayFilter(fruits(), function(fruit) {
        return fruit.length > 5;  // Only fruits with more than 5 characters
    });
});

// Log the filtered fruits
console.log(filteredFruits());  // ["Banana", "Orange"]

এখানে:

• ko.utils.arrayFilter() ফাংশনটি fruits() অ্যারের মধ্যে সেই ফলগুলোকে নির্বাচন করে, যেগুলোর নামের দৈর্ঘ্য ৫ অক্ষরের বেশি।

2. Mapping in KnockoutJS

Mapping ফিচারটি KnockoutJS তে ডেটা অ্যারের উপর রূপান্তর বা ম্যাপিং করতে ব্যবহৃত হয়। যখন আপনি একটি অ্যারের আইটেমগুলিকে নতুন কাঠামোতে রূপান্তর করতে চান, তখন ko.utils.arrayMap() ব্যবহার করা হয়।

Array Mapping ব্যবহার করার ধারণা

ko.utils.arrayMap() ফাংশনটি একটি অ্যারে এবং একটি ফাংশন নেয় এবং প্রত্যেকটি আইটেমের উপর ফাংশন প্রয়োগ করে একটি নতুন অ্যারে তৈরি করে।

Syntax:

ko.utils.arrayMap(array, function(item) {
    return mappedItem; // Return the mapped item
});

Example:

ধরা যাক, আমাদের একটি অ্যারে আছে যেখানে ফলের নাম এবং দাম রয়েছে এবং আমরা দাম অনুযায়ী একটি নতুন অ্যারে তৈরি করতে চাই।

// Observable Array with fruits and their prices
var fruits = ko.observableArray([
    { name: 'Apple', price: 2 },
    { name: 'Banana', price: 1.5 },
    { name: 'Orange', price: 3 }
]);

// Map fruits to a new structure where only the name and price are shown
var mappedFruits = ko.computed(function() {
    return ko.utils.arrayMap(fruits(), function(fruit) {
        return {
            fruitName: fruit.name,  // Mapping fruit name
            fruitPrice: '$' + fruit.price.toFixed(2)  // Mapping price with $ sign
        };
    });
});

// Log the mapped fruits
console.log(mappedFruits());

এখানে:

• ko.utils.arrayMap() ফাংশনটি fruits() অ্যারের প্রতিটি আইটেমের উপর ফাংশন প্রয়োগ করে একটি নতুন অ্যারে তৈরি করেছে, যেখানে ফলের নাম এবং দাম নতুন কাঠামোতে fruitName এবং fruitPrice হিসেবে সংরক্ষিত হয়েছে।

3. Filter and Mapping Combined in KnockoutJS

কখনও কখনও, আপনাকে array filter এবং mapping একত্রে ব্যবহার করতে হতে পারে, যেমন যখন আপনি অ্যারে থেকে কিছু আইটেম ফিল্টার করতে চান এবং তারপরে ফিল্টার করা আইটেমগুলোর উপর রূপান্তর প্রয়োগ করতে চান।

Example: Filter and Map Together

var fruits = ko.observableArray([
    { name: 'Apple', price: 2 },
    { name: 'Banana', price: 1.5 },
    { name: 'Orange', price: 3 },
    { name: 'Pineapple', price: 4 }
]);

// First filter fruits where price is greater than 2 and then map them
var filteredAndMappedFruits = ko.computed(function() {
    return ko.utils.arrayMap(
        ko.utils.arrayFilter(fruits(), function(fruit) {
            return fruit.price > 2;  // Filtering fruits with price greater than 2
        }),
        function(fruit) {
            return {
                fruitName: fruit.name,
                fruitPrice: '$' + fruit.price.toFixed(2)
            };
        }
    );
});

console.log(filteredAndMappedFruits());  
// Output: [{ fruitName: "Orange", fruitPrice: "$3.00" }, { fruitName: "Pineapple", fruitPrice: "$4.00" }]

এখানে:

• ko.utils.arrayFilter() ব্যবহার করে ফলগুলো ফিল্টার করা হয়েছে, যেখানে দাম ২ এর বেশি।
• তারপর, ko.utils.arrayMap() ব্যবহার করে শুধুমাত্র প্রয়োজনীয় তথ্য (ফল নাম এবং দাম) ম্যাপ করা হয়েছে।

4. Practical Example: Shopping Cart

ধরা যাক, আপনার একটি শপিং কার্ট অ্যাপে গ্রাহকের নির্বাচিত পণ্য এবং তাদের দাম রয়েছে। আপনি একটি ফিল্টারিং এবং ম্যাপিং ফিচার তৈরি করতে চান।

var cartItems = ko.observableArray([
    { name: 'Laptop', price: 1000 },
    { name: 'Phone', price: 600 },
    { name: 'Headphones', price: 100 }
]);

// Filter items with price greater than 200 and map the results
var expensiveItems = ko.computed(function() {
    return ko.utils.arrayMap(
        ko.utils.arrayFilter(cartItems(), function(item) {
            return item.price > 200;
        }),
        function(item) {
            return {
                itemName: item.name,
                itemPrice: '$' + item.price.toFixed(2)
            };
        }
    );
});

console.log(expensiveItems()); 
// Output: [{ itemName: "Laptop", itemPrice: "$1000.00" }, { itemName: "Phone", itemPrice: "$600.00" }]

এখানে:

• ko.utils.arrayFilter() ফাংশনটি শুধু দাম ২০০ এর বেশি এমন আইটেমগুলোকে ফিল্টার করে।
• ko.utils.arrayMap() ফাংশনটি ফলের নাম এবং দামকে একটি নতুন কাঠামোতে রূপান্তরিত করে।

সারাংশ:

• ko.utils.arrayFilter() এবং ko.utils.arrayMap() KnockoutJS এর শক্তিশালী ফিচার যা ডেটার অ্যারেগুলোর মধ্যে ফিল্টার এবং ম্যাপিং করতে সাহায্য করে।
• arrayFilter() ব্যবহার করে আপনি একটি অ্যারের থেকে নির্দিষ্ট শর্ত অনুযায়ী আইটেমগুলো ফিল্টার করতে পারেন।
• arrayMap() ব্যবহার করে আপনি একটি অ্যারে থেকে নতুন কাঠামো বা ফর্ম্যাটে ডেটা তৈরি করতে পারেন।
• আপনি filtering এবং mapping একত্রে ব্যবহার করে জটিল ডেটা ম্যানিপুলেশন খুব সহজে করতে পারেন, যেমন শপিং কার্টে দাম অনুযায়ী আইটেম ফিল্টার করা এবং তাদের নতুন ফরম্যাটে রূপান্তর করা।

এই ফিচারগুলি KnockoutJS এর ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরিতে খুবই কার্যকরী এবং সাহায্যকারী।