Javascript - Infinite scroll JSON array?

Question

I have JavaScript like that:

items.forEach(function (item, index, arr) {
                console.log(item.price);
                var message = 'BitSkins Price: $' + item.bprice + '';
                if (item.price != null) {
                    if (item.bprice == '') {
                        message = 'Item never sold on BitSkins!';
                    }
                    if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
                        $("#inventory").html($("#inventory").html() + "<li class='col 2' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + numberWithCommas(item.price) + "</li></div></div>");
                    }
                }
            });

Which adds each item in array to the html and then shows there. items array containts JSON, which could be 1000 different items. How could I add infinite scroll on that JavaScript? Example: It will show first 50 items, then if you scroll another 50.. Also, sort them by the price (I got it in code already).

Possible duplicate of [jQuery load more data on scroll](http://stackoverflow.com/questions/14035180/jquery-load-more-data-on-scroll) — Jean-Luc Barat, May 07 '16 at 12:08
So you want to add a sort of paging to your displayed array? — kies, May 08 '16 at 08:23

score 1 · Answer 1 · answered May 07 '16 at 12:12

1

How about writing a small function that checks scroll position and fires a 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 so many plugins, I am using Waypoint for one of the same thing.

answered May 07 '16 at 12:12

Language Lassi

2,520
21
24

That array already has 1000 items in it, how could I get only "exact" amount? – Jacob Revestus May 07 '16 at 12:17
you can initiate a counter and splice the object to some offset number 20-50 and and on scroll update the offset with increased value and get next 50 from object. – Language Lassi May 07 '16 at 12:20
Could you make me an example? I am not that good in coding such "complicated" things :( – Jacob Revestus May 07 '16 at 12:24

Dmitriy Nevzorov · Accepted Answer · 2016-05-08T09:54:49.583

You can easily do it like this:

var perPage = 50;

function paginate(items, page) {
  var start = perPage * page;
  return items.slice(start, start + perPage);
}

function renderItems(pageItems) {
  pageItems.forEach(function (item, index, arr) {
    var message = 'BitSkins Price: $' + item.bprice + '';
    if (item.price != null) {
      if (item.bprice == '') {
        message = 'Item never sold on BitSkins!';
      }
      if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
        $("#inventory").append("<li class='col 2' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + numberWithCommas(item.price) + "</li></div></div>");
      }
    }
  });
}

$(document).ready(function() {
  var win = $(window);
  var page = 0;
  renderItems(paginate(items, page));

  // Each time the user scrolls
  win.scroll(function() {
    // End of the document reached?
    if ($(document).height() - win.height() == win.scrollTop()) {
      page++;
      renderItems(paginate(items, page));
    }
  });
});

Or using jQuery endlessScroll plugin

$(document).ready(function() {
  $(window).endlessScroll({
    inflowPixels: 300,
    callback: function() {
      //append new items to your list
    }
  });
});

Yeah, but how could I do it like. If you first load pages it will load 50 items, if you get to the bottom, then load another 50. How could I do that part? — Jacob Revestus, May 08 '16 at 09:31
Hmm, Thank You! But, those items are in array called `items` and I am getting them by foreach at the moment. I just should change it to a different name? — Jacob Revestus, May 08 '16 at 10:02
Here's my full JavaScript code: http://pastebin.com/raw/13MHn4Tf That code starts at line 151.. I think it will help a lot more :/ — Jacob Revestus, May 08 '16 at 10:06
Yes, use different names for array of all items and items for each page. But you should get general idea from my example. And I suggest you to refactor `renderItems` function to NOT use inline css and use some template lang like http://underscorejs.org/#template — Dmitriy Nevzorov, May 08 '16 at 10:26
Thank You! I got it working, but it actually broke one thing, can you give me suggestion to fix it? — Jacob Revestus, May 08 '16 at 16:16
I have system that, if you click on item then it goes "red" and those it's thing. At first it works, but after "scroll thing" it doesn't. — Jacob Revestus, May 08 '16 at 16:22
Sir, Hello? Could you help me fixing that other thing as well? It's not a problem though if you can't. I'll accept your answer as well :) — Jacob Revestus, May 09 '16 at 14:40

score 0 · Answer 3 · answered May 07 '16 at 12:46

0

Try using additional variables like current page (if you have 1000 items and you show 50 in each, then you'll have a max of 20 pages to show), number of items on a page, start index and end index.

Assume:

var currPage = 0; //(First page)

var itemsInPage = 50; //NUMBER OF ITEMS IN A PAGE

Then for every scroll, calculate the startItem index and endItem index.

startItem = currPage * itemsInPage;//FOR FIRST PAGE, THIS IS 0

endItem = startItem + itemsInPage; //AND THIS IS 50

In the forEach loop, check if( index >= startItem && index < endItem ) and display only those items.

You will have to increment the currPage after every scroll and at the beginning of the forEach loop, add:

if( currPage > Math.ceil( items.length/itemsInPage ) ) currPage = 1;

(Round up using ceil because if length of 'items' is not perfectly divisible by 'itemsinpage', then they add up as an additional page)

answered May 07 '16 at 12:46

Maddy PZ

16
1

Hmm, Could you put it into "one code"? I could give you some more information if needed though.. Thanks btw! :) – Jacob Revestus May 07 '16 at 13:30
Hello, Sir? I hope you are still here :) – Jacob Revestus May 07 '16 at 16:14
Yeah, sorry about that. Here's a sample: `var currPage = 0, itemsInPage = 100, items = [], scrollTimeout = 0; for(i=0;i<1000;i++) items.push( i+1 ); window.onscroll = function() { clearTimeout(scrollTimeout); scrollTimeout = setTimeout( function() { items.forEach( function (item, index, arr) { if( currPage >= Math.ceil( items.length/itemsInPage ) ) currPage = 0; startItem = currPage * itemsInPage; endItem = startItem + itemsInPage; if( index >= startItem && index < endItem ) console.log(item); }); currPage++; }, 250); };` – Maddy PZ May 11 '16 at 16:56
Open your browser (I use chrome), navigate to any page that has a scroll bar (a long page). Open the console, clear it and paste the above code. Now, scroll to see the items being displayed! – Maddy PZ May 11 '16 at 16:58

score -1 · Answer 4 · edited May 23 '17 at 12:25

-1

If you can use a third party take a look here Infinite ajax scroll.

Or as explain in similar asked question use JQuery Waypoint plugin

edited May 23 '17 at 12:25

Community

1
1

answered May 07 '16 at 12:07

Jean-Luc Barat

1,147
10
18

Javascript - Infinite scroll JSON array?

4 Answers4

Related