0

Here is a lot of code, but it's pretty simple and I think it's done I'm just stuck on line inside constructor at variable this.barrier. Before it on line this.get_elements() what it does is gets 5 lists from database and then calls this.render and renders them on page. This part is working. What I want to do is autoload of lists when person scrolls to the end of page. So I'm creating variable this.barrier which gets the total size of a body AND ATTENTION! it returns me a value 375px, but after render body size is 2500px! As I know js is asynchronous code reader, so I'm guessing even when I wrote 

this.barrier = document.querySelector('body').getBoundingClientRect().height;

after line this.get_elements(); this.render hasn't finished yet.... And I don't know how to deal with it. 

import * as server from './listings';

export class listScroll
{
    constructor(lists){
        this.dropLists = 5;
        this.lists = lists;
        this.arrLists = this.get_array(this.lists); // All indexes of all lists
        this.divMain = document.querySelector('.index__main');
        this.get_elements(); //gets 5 lists and render them on page
        this.barrier = document.querySelector('body').getBoundingClientRect().height; // console.logs 375px but it should be 2500px!
        window.addEventListener('scroll', () => this.scroll());
    }

    scroll()
    {
        if((this.barrier <= (pageYOffset + window.innerHeight)) && this.arrLists.length > 0){
            this.barrier += this.dropLists * document.querySelector('.item:first-child').getBoundingClientRect().height;
            this.get_elements();
        }
    }

    get_array(obj)
    {
        let arr = [];
        for(let key in obj)
        {
            arr.push(obj[key]['id_item']);
        }
        return arr;
    }

    get_elements()
    {
        let formData = new FormData();
        let arr = this.arrLists.splice(0, this.dropLists);
        for(let name in arr)
        {
            formData.append(name, arr[name]);
        }

        let result = server.getLists('http://sellbuyschool42.com/listings/getElements',{
            method  :   'POST',
            body    :   formData
        }).then((data) =>{
            this.render(data);
        });
    }

    render(data)
    {
        for(let key in data){
            let div = document.createElement('div');
            div.classList.add('item');
            div.innerHTML = `<div class="item_body">
                <div class="item_img">
                    <img src="uploads/${data[key]['file']}">
                </div>
                <div class="item_title">
                    <p class="item_title_name">${data[key]['name']}</p>
                    <p class="item_title_time">${data[key]['time']}</p>
                    <p class="item_title_price">${data[key]['price']}<span style="color: #ff33cc; font-family: 'Faster One', cursive; font-size: 25px"> $</span></p>
                </div>
            </div>
            <a class="item_link" href="#">Read more</a>`;
            this.divMain.append(div);
        }
    }
}
Eldar Tailov
  • 59
  • 5
  • Return the promise you get from `getLists()` in `get_elements()` and do a `then()` with your code inside it, eg `this.get_elements().then(()=>{ /*code here*/ })` – Patrick Evans May 22 '20 at 12:54
  • Basically, you need to add a callback parameter `get_elements` function, or better yet, have it return the promise `server.getLists` returns. Then you can use `this.get_elements().then(() => this.barrier = document.querySelector('body').getBoundingClientRect().height)` – Heretic Monkey May 22 '20 at 12:54

0 Answers0