Javascript array issue with vue-infinite-loading

Question

I am trying to implement Infinite Loading using vue-InfiniteLoading component. I am getting an array everytime I scroll and I try to push the contents from the array to another array when I get the data. When I used push, I see new elements on screen but no images and infomation..

I tried push, concat and foreach, none of them worked for me. response.data.data.data is the array containin new elements and dorms is the main array shown on UI.

I also tried push (...response.data.data.data)

    .get(`/site/cities/dorms/istanbul?page=${self.page}`)
    .then(response => {
      if (response.data.data.data) {
        this.page += 1;
        // var myArray = self.dorms;
        // self.dorms = myArray .concat(response.data.data.data);
        // self.dorms.push(response.data.data.data[1]);
        /*             response.data.data.data.forEach(item => {
          self.dorms.push(item);
        }); */
        self.dorms.push(...response.data.data.data);

        //self.dorms = response.data.data.data;
        self.popupDorms = response.data.data.popups;
        $state.loaded();
      } else {
        $state.complete();
      }
    });

I expect all informatin within array pushed but it doesnt work.

can you show the response JSON? is it really nested as 3 levels deep of keys named "data"? — scunliffe, May 28 '19 at 14:16
within arrow functions you should use `this` instead of `self` — coderocket, May 28 '19 at 14:22

score 0 · Answer 1 · answered May 28 '19 at 14:17

We can write a small function that checks scroll position and fires an ajax call to get more data or just get the next slot of data from your JSON object and bind it to HTML. something as below:

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call or some other logic to show data here
    }
});

Or you can use one of the plugins that are available, I am myself using "Waypoint" for one of the same things.

score 0 · Answer 2 · answered May 28 '19 at 14:17

0

You could do:

self.dorms = [...self.dorms, ...response.data.data.data]

or

self.dorms = [].concat(self.dorms, response.data.data.data)

or

self.dorms.push(...response.data.data.data)

all result in the same result. Your error should be somewhere else.

answered May 28 '19 at 14:17

coderocket

584
3
11

Javascript array issue with vue-infinite-loading

2 Answers2