0

On scroll I am wanting to get the previous and next results.

So I first bind the scroll

            window.document.body.onscroll = function () {
                _self.getNewSeriesOnScroll();
            }

the getNewSeriesOnScroll includes

if (scroll === 0) {
                    const date = series[seriesKeys[0]][0].start_time;

                    this.axios.get('/series/previous', {
                        params: {
                            date: date,
                        },
                    }).then(res => {


                        // Loop over the days
                        for (let day in res.data) {

                            let currentDay = res.data[day];

                            // If the day doesn't exist, create it and push the events
                            if (!this.series[day]) {
                                this.series[day] = res.data[day];
                            } else {

                                // If the day does exist push each of the returned to it

                                for (let a in currentDay) {
                                    this.series[day].unshift(currentDay[a]);
                                }

                            }

                            this.$forceUpdate();


                            console.log('looping over day ', day, currentDay)
                        }
                    });

                }

This should add an object before the existing keys in the object, for example

{
    "Sunday, July 12th, 2020": [...] 
    "Monday, July 13th, 2020": [...],
    "Tuesday, July 14th, 2020": [...]
}

The problem:

When scrolling up and getting the new results it doesn't add the dates in order, how can I make it so it adds the key to the beginning of the Object?

And how can I also prevent it jumping to the top when it loads the previous results? If I store the state of where you are, it's 0, and if I try and grab the first result before loading then load, then try and navigate down to that div, it just doesn't do anything as it sees the first element as the first element after the results are loaded.

I am using Vue if that makes any difference

Ian
  • 3,539
  • 4
  • 27
  • 48
  • Use Array's over Objects if you want to sort/order items specifically: https://stackoverflow.com/a/5525820/1790728 – Chris Jul 13 '20 at 10:21
  • @Christiaan that isn't possible, I can't just switch to arrays when the API returns Objects. I still need to handle them – Ian Jul 13 '20 at 10:37
  • yes, that is possible. If you map the API data into a series collection like this: `[{ date: 'Tuesday, July 14th, 2020', data: [{ ... }, { ... }] }, { date: 'Monday, July 13th, 2020', data: [] }]`, you can apply sorting on the array by the `date` property. – Chris Jul 13 '20 at 11:31
  • I see, I ended up creating a temp array and then reassigning previous results to that which seems to be working fine now. Just got to solve the jumping issue when loading previous results – Ian Jul 13 '20 at 11:44

0 Answers0