API call with Axios filtering response.data

Question

I want to get the newest 8 products depend on product's date. I can get the whole products array and filter it as you see below:

    const newestProducts= [];
    axios.get("http://localhost:3003/products").then(response => {
        let products = response.data.sort(function(a, b) {
            return new Date(b.date) - new Date(a.date);
        });

        newstProducts = product.slice(0,7)
    });

but this will be so bad if I have thousands of product, and I just need to get the newest 8 Products only

I thought about adding ?_limit=8 to the call

axios.get("http://localhost:3003/products?_limit=8").then{...}

but this also doesn't work propersly as you know because it gets me the only top 8 products of the array

Is there any way to filter the products before I get it from the server or I MUST store them all in var and then filter them

The Json File

      "categories": [ 
            {
            "id": 9,
            "category": "bathroom",
            "date": "2020/8/3",
            "name": "ullam basin mixer",
            "price": 160,
            "img_1": "rim_mixer_01.jpg",
            "img_2": "rim_mixer_02.jpg",
            "rating": 4.5,
            "description": "MARMO is a complete series made of 72 models, with different shapes and sizes for different functions, that keeps uncompromised its elegant beauty. This is a Demo Online Store."
        },
        {
            "id": 10,
            "category": "bathroom",
            "date": "2020/8/19",
            "name": "gravida bathtub",
            "price": 2100,
            "img_1": "inbani_bathtub_01.jpg",
            "img_2": "inbani_bathtub_02.jpg",
            "rating": 4,
            "description": "A young company with a wealth of experience. created in 2004, inbani has evolved into a leader in innovation thanks to a conviction to create products which truly benefit the well-being of the customer.  This is a Demo Online Store. No orders shall be fulfilled."
        },
        {
            "id": 11,
            "category": "bathroom",
            "date": "2020/9/9",
            "name": "vulputate mixer",
            "price": 300,
            "img_1": "marmo_mixer_01.jpg",
            "img_2": "marmo_mixer_02.jpg",
            "description": "MARMO is a complete series made of 72 models, with different shapes and sizes for different functions, that keeps uncompromised its elegant beauty. This is a Demo Online Store."
        },
        {
            "id": 12,
            "category": "bathroom",
            "date": "2018/7/17",
            "name": "aliquam veneatis bathtub",
            "price": 2580,
            "img_1": "sa_oche_01.jpg",
            "img_2": "sa_oche_02.jpg",
            "description": "Its oval, elliptical design with the incongruent walls invokes an avant-garde atmosphere in the bathroom."
        },
        {
            "id": 13,
            "category": "kitchen",
            "date": "2020/3/13",
            "name": "quisque teapot",
            "price": 240,
            "img_1": "theo_teapot_01.jpg",
            "img_2": "theo_teapot_02.jpg",
            "description": "Theo Teapot is a Scandinavian-Japanese teapot made from stoneware and bamboo, designed by Unit 10 Design for Stelton.  This is a Demo Online Store. No orders shall be fulfilled."
        },
        {
            "id": 14,
            "category": "kitchen",
            "date": "2020/2/12",
            "name": "creamic teapot",
            "price": 60,
            "img_1": "cer_teapot_01.jpg",
            "img_2": "cer_teapot_02.jpg",
            "rating": 3.9,
            "description": "Matte ceramic tea pot comes with integrated and removable metal tea infuser. Capacity 700 ml (2.96 cups). Dishwasher safe. This ceramic teapot has a white matte finish, coupled with a square shape and curved lines."
        },
        {
            "id": 15,
            "category": "kitchen",
            "date": "2019/2/1",
            "name": "bottle grinders",
            "price": 30,
            "img_1": "bottle_gringer_01.jpg",
            "img_2": "bottle_gringer_02.jpg",
            "rating": 4.8,
            "description": "Bottle Grinders is a minimal, timeless salt and pepper mill set designed by Norm.Architects for Menu. Steering away from the predictable grinder, the Norm Bottle Grinder is not what you expect to see in a salt and pepper grinder. The form, shaped more like a bottle, cleverly tricks the user to encourage a more playful and experimental interaction with the product. This is a Demo Online Store. No orders shall be fulfilled. Purchase this product"
        },
        {
            "id": 16,
            "category": "lighting",
            "date": "2020/1/3",
            "name": "commodo blown lamp",
            "price": 275,
            "img_1": "tradition_blown_01.jpg",
            "img_2": "tradition_blown_02.jpg",
            "description": "Blown lamp SW3 & SW4 by &tradition is a mouth-blown pendant lamp with a quilted pattern, it comes in a translucent variant with a silver lustre or in a opal white version. Blown lamp is fitted with a powder-coated metal suspension. This is a Demo Online Store. No orders shall be fulfilled."
        },
        {
            "id": 17,
            "category": "lighting",
            "date": "2020/6/9",
            "name": "spot table",
            "price": 100,
            "img_1": "spot_lamp_01.jpg",
            "img_2": "spot_lamp_02.jpg",
            "rating": 3.4,
            "description": "Set the stage. The Spot lamp is a lively, versatile addition to your room. This is a Demo Online Store. No orders shall be fulfilled."
        }
    ]

API call with Axios filtering response.data

Answers (1)

Related Questions