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>

zlowe · Accepted Answer · 2022-03-16 22:32:40Z

2

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')

answered Mar 16, 2022 at 22:32

zlowe

6027 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tauzN Over a year ago

How would you know?

Phil Over a year ago

@tauzN by reading the documentation

Collectives™ on Stack Overflow

Fetching data with axios from json server

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related