Make am auto scroll load more data when user reaches bottom from api

Question

okay i have an api from which i get data and the data is put into an array that data is then put on an html page for the users to scroll through.all that is working.

i would like to know how i can now put only the first 10 results on to a page and then the rest auto reload from the array. i have seen those with mysql but getting data from an array is still bothering me.

any help is welcome.

$url = 'API';
$ch = curl_init();
curl_setopt($ch, CURLOPT_U`enter code here`RL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
$output = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);


$echo_array = $array['jobs'];
usort($echo_array, function($a, $b) {
    return strtotime($a['einsatzstartdatum']) - strtotime($b['einsatzstartdatum']);
});
// print_r($echo_array);


foreach ($echo_array as $job)
{
    //echo "Id:". $job['ID'] ."\n";
    echo "Town:". $job['einsatzort'] ."\n";
    echo "stellentitel:". $job['stellentitel'] ."\n";
    echo "einsatzstartdatum:". $job['einsatzstartdatum'] ."\n";
    echo "bewerbunganlagenbenoetigt:". $job['bewerbunganlagenbenoetigt'] ."\n"."\n"."\n";

};

Answer 1

If it's just about the display i would put the content in a javascript array with all your php rows in it.

Than update the content with a scroll event when it reaches the bottom.

here's a little example i made to get an idea of how i would go about it: (keep in mind this is based on the idea that you load all the data at once)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script type="text/javascript">

    //fill a javascript arr with all your content
    var dummyContentArr = new Array();

    var limit = 10;

    //just for the example some dummy data
    for(var i = 0; i < 100; i++) {
        var dummyContent = 'town: yada ' + i +  '"\n"' + 
        'stellentitel: test ' + i + '"\n"' +
        'einsatzstartdatum: test ' + i + '"\n" ' +
        'bewerbunganlagenbenoetigt: test ' + i + '"\n"';
        dummyContentArr.push(dummyContent);
    }

    $(document).ready(function() {
        displayContent(10);

        //this scroll event will will update the limit when the scroll bar hits the bottom
        $('#content').on('scroll', function() {
            if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                displayContent(limit);
                limit += 10;
            }
        });

    });

    //just a simple function thingy to update the content
    function displayContent(limit) {
        content = '';
        for(i = 0; i < limit; i++) {
            content += dummyContentArr[i]; 
        }
        $('#content').html(content);
    }
</script>

<style>
    #content {
        background-color: red;
        height: 200px;
        width: 200px;
        overflow-y: scroll;
    }
</style>


<div id="content"></div>