How do I categorize products by price and display them on different pages using JavaScript? [closed]

You can check the URL Query string for the category, and display products based of that category and their price. Alternatively, you could put the category in the product itself. Here is some code that will return products based off category in the URL:

// Define the products
const products = [
    {
        name: "Product A",
        price: 100
    },
    {
        name: "Product B",
        price: 200
    },
    {
        name: "Product C",
        price: 300
    },
    {
        name: "Product D",
        price: 400
    },
    {
        name: "Product E",
        price: 500
    }
]


// Define the categories
const categories = {
    "budget": [0, 100],
    "midrange": [100, 500],
    "premium": [500, Infinity]
}

function displayProducts() {
    const searchString = location.search;
    // Check if the search string is empty
    if (searchString.length == 0) {
        console.warn("The search string is empty");
        return [];
    }

    const urlParams = new URLSearchParams(window.location.search);
    const targetCategory = urlParams.get("category");
    const priceRange = categories[targetCategory]; // Get the prices range from targetRange string

    if (priceRange == undefined) {
        console.warn("Unknown category");
        return [];
    }

    return products.filter(product => 
        product.price > priceRange[0] && product.price <= priceRange[1]
    );
}

The code searches for category=<category> in the URL Query, gets the prices range and returns products, that are in the price range.

Hope this helps!