Javascript - Infinite Scroll JSON-Array?

Question

Ich habe JavaScript wie folgt aus:

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>"); 
        } 
       } 
      }); 

, die jeweils item in Array fügt dem html und dann dort zeigt. items Array enthält JSON, die 1000 verschiedene Elemente sein könnte. Wie kann ich infinite scroll zu diesem JavaScript hinzufügen? Beispiel: Es werden zuerst 50 Elemente angezeigt, dann wenn Sie weitere 50 scrollen. Sortieren Sie sie auch nach dem Preis (ich habe es bereits im Code).

Answer 1

können Sie tun es einfach so:

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)); 
    } 
    }); 
}); 

Oder Sie jQuery endlessScroll plugin

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

Answer 2

Wenn Sie einen Dritten verwenden können, schauen Sie hier Infinite ajax scroll.

Oder wie in similar asked question Verwendung JQuery Waypoint plugin

Answer 3

erklärt Wie sei es eine kleine Funktion schreiben, die Scroll-Position überprüft und feuert einen Ajax-Aufruf, um mehr Daten zu bekommen oder einfach nur den nächsten Schlitz von Daten von Ihrem json Objekt erhalten und binden Sie es an HTML. wie unten etwas:

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

Oder Sie eine der so viele Plugins verwenden können, ich bin mit Waypoint für ein von der gleichen Sache.

Answer 4

Versuchen Sie, zusätzliche Variablen wie aktuelle Seite (wenn Sie 1000 Elemente haben und Sie 50 in jedem anzeigen, dann haben Sie maximal 20 Seiten anzuzeigen), Anzahl der Elemente auf einer Seite, Start-Index und Ende-Index .

Angenommen:

var currPage = 0; //(First page)

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

Dann für jede blättern, die startItem Index und endItem Index berechnen.

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

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

Im forEach Schleife überprüfen if(index >= startItem && index < endItem) und angezeigt werden diese Elemente nur.

Sie die currPage nach jeder Rolle und am Anfang der forEach Schleife erhöhen müssen, fügen:

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

(Aufrunden ceil verwenden, weil, wenn die Länge von ‚Items‘ nicht perfekt teilbar ist von ‚itemsinpage‘, dann addieren Sie sie als zusätzliche Seite)