Fetching data with axios from json server

Question

I know how to get all the data from the json server, but now I would like to know if there is a way to call a certain number of say products, because I want to add a button when the user clicks on it and then make another call and display a few more products on the page...I am using Vue, and this is just an exercise project and i am only creating view, so thats why i am using json server

<template>
<div v-for="product in products" :key="product.name">
    <Product :product="product" />
</div>
</template>

<script>
data() {
    return {
       products: []
    }
},
async created() {
    try{
        const response = await axios.get('http://localhost:3000/products')
            
        this.products = response.data
    } catch(err) {
        console.log(err)
    }
}
</script>

Answer 1

You can use the _limit and _page query parameters in your route.

// Get products 1-10
const response = await axios.get('http://localhost:3000/products?_limit=10&_page=1')

// Get products 11-20
const response = await axios.get('http://localhost:3000/products?_limit=10&_page=2')

// Get products 31-45
const response = await axios.get('http://localhost:3000/products?_limit=15&_page=3')