Problem
I want to load different food products on a page which users then can scroll through.
For this I am using pagination in sqlalchemy which works fine.
The problem though is that I have discovered that some products are being repeated and I have trouble figuring out why.
I.e when I scroll down the page and the next 10 products are being loaded one or two of them are the same as one of the first 10 that was loaded.
I have included a distinct on the ids but it doesnt seem to help.
What can I do to make sure I don't get duplicate products when I scroll down the page?
Backend code (Flask/Python)
from sqlalchemy_paginator import Paginator
def all_products():
user_id = request.args.get("userid")
main_category_id = request.args.get("category_id")
page_nr = request.args.get("page_nr")
category_product_query1 = Session.query(enjordfoodProducts.id).distinct(enjordfoodProducts.id).group_by(enjordfoodProducts.id).subquery()
category_product_query = Session.query(enjordfoodProducts,enjordfoodCompanies).filter(enjordfoodProductsToCompanies.product_id == enjordfoodProducts.id,
enjordfoodProductsToCompanies.company_id == enjordfoodCompanies.id).join(
category_product_query1, category_product_query1.c.id == enjordfoodProducts.id).order_by(desc(enjordfoodProducts.ranking_value),enjordfoodProducts.id)
paginate = Paginator(category_product_query,8)
pg = paginate.page(page_nr)
products_list= pg.object_list
total_pages = paginate.total_pages
all_product_dictionary = []
all_product_list = []
for product, company in products_list:
all_product_dictionary = {
'id' :product.id,
'product_name':product.product_name,
'product_image':product.product_image,
'env_value':product.product_env_value,
'env_value_color':product.env_value_color,
'created_by_userid':product.created_by_userid,
'is_category':product.is_category,
'company': company.company_name,
}
all_product_list.append(all_product_dictionary)
result_dict = {}
result_dict["all_products_list"] =all_product_list
result_dict["current_page_nr"] = page_nr
result_dict["total_page_nr"] = total_pages
result = json.dumps(result_dict)
return result
Frontend code Vue.js
<div class="flow" >
<div class="flowpost" v-for="(post,idx) in all_products_list" :key="idx" @click="to_product(post.id)" >
<img class="product_image" :src="get_image(post.created_by_userid,post.product_image)" />
<div :style="{marginLeft:'12%',marginTop:'40%', height:'23px', position:'absolute',color:'white',paddingTop:'0%',fontSize:'13px', paddingLeft:'0%',paddingRight:'0%',width:'50px', borderRadius:'12px', backgroundColor:post.env_value_color}">
<img :style="{height:'19px', width:'19px'}" :src= "`${publicPath}`+ 'loggaenjord.png'" alt=""/>
<div :style="{marginTop:'-20px',marginLeft:'54%', color:'white'}">{{post.env_value}}</div>
</div>
<div :style="{marginTop:'47%',position:'absolute',lineHeight: 0.9, marginLeft:'3%',width:'120px', textAlign:'center',color:'black'}">
<span :style="{fontSize:'11px', fontWeight:600}">{{post.product_name}}</span> <br>
<span :style="{fontSize:'9.3px'}">{{post.company_name}}</span>
</div>
</div>
</div>
methods:{
load_all_products(page_nr){
var self = this
axios({
method:'get',
url: API_URL+ '/all_products' + '?user_id='+this.user_id+'&page_nr='+page_nr ,
})
.then(function(response){
self.all_products_list.push.apply(self.all_products_list,response.data["all_products_list"])
self.current_page_nr = response.data["current_page_nr"]
self.total_page_nr = response.data["total_page_nr"]
})
},
addmore(){
if ( this.current_page_nr <this.total_page_nr ){
var page_nr = Number(this.current_page_nr) +1
this.load_all_products(page_nr)
}
}
},
mounted(){
this.load_all_products(1)
window.onscroll = () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
if (bottomOfWindow ) {
this.addmore()
}
}
}